weather

<div class='container' ng-app='app' ng-controller='weatherController'>

  <img class='background' src="https://images.unsplash.com/photo-1446426156356-92b664d86b77?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375" alt='background image'>

  <div class='content jumbotron'>

    <div class='row'>

      <div class='location-info' ng-show='!!weather'>

      <div class='well'>

        <h2>{{location.city}}</h2>

      </div>    

    </div>

    </div>

    <div class='row'>

      <div class='loading' ng-show='!weather'>

        <i class='fa fa-cog fa-spin'></i>

      </div>

      <div class='weather-info col-md-6 col-md-offset-3' ng-show='!!weather'>

        <div class='row'>          

          <div class='description col-md-4 well'>

            <p> {{weather.description}} </p>

            <div class='icon'>

              <img ng-src="{{weather.icon}}" alt="weather icon" />

            </div>

          </div>

          <div class='temp col-md-4 well'>

            <p>{{getTemp()}} <span ng-show='isMetric'>°C</span><span ng-show='!isMetric'>°F</span></p>

            <div class='temp-control'>

              <button class='btn btn-info' ng-class="{'disabled':isMetric}" ng-click='isMetric = true;'>°C</button>

              <button class='btn btn-info' ng-class="{'disabled':!isMetric}" ng-click='isMetric = false;'>°F</button>

            </div>

          </div>

          <div class='humidity col-md-4 well'>

            <p>{{weather.atmos.humidity}}% humidity</p>

            <p>{{getWind()}}</p>

          </div>

        <div>

      </div>

    </div>

  </div>

</div>