Cacher is the code snippet organizer for pro developers

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />

/* Space out content a bit */
.lead.ng-enter, p.ng-enter{
  animation:fadeIn 1s;
}
.jumbotron,table {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
 
 box-shadow: 0 8px 16px -6px black;
 
  
}

h3{
  color: black;
}

body {
  padding-top: 20px;
  padding-bottom: 20px;
    background: url('http://molliejohanson.com/wildolive/Clouds_L.jpg')no-repeat   center center fixed ;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
background-size: cover;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-right: 15px;
  padding-left: 15px;
}

/* Custom page header */
.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

/* Customize container */
@media (min-width: 768px) {
  .container {
    max-width: 730px;
  }
}
.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}
.jumbotron  {
  padding: 14px 24px;
  font-size: 21px;
}

/* Supporting marketing content */
.marketing {
  margin: 40px 0;
}
.marketing p + h4 {
  margin-top: 28px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
  /* Remove the padding we set earlier */
  .header,
  .marketing,
  .footer {
    padding-right: 0;
    padding-left: 0;
  }
  /* Space out the masthead */
  .header {
    margin-bottom: 30px;
  }
  /* Remove the bottom border on the jumbotron for visual effect */
  .jumbotron {
    border-bottom: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.js"></script>

var myApp = angular.module('myApp', ['ngAnimate']);
myApp.controller('MyCtrl', ['$scope', '$http', '$animate', function($scope, $http) {

  $scope.initial = new Date();

  $scope.week = [new Date(), new Date(), new Date(), new Date(), new Date(), new Date(), new Date()];

  for (i = 1; i < $scope.week.length; i++) {
    $scope.week[i] = new Date($scope.week[i].setDate($scope.week[i].getDate() + i));
  }

  console.log($scope.week)

  $scope.temp;
  $scope.tempC;
  $scope.state;
  $scope.lon;
  $scope.lat;
  var weatherurl;
  $scope.description;
  $scope.isHidden = false;
  $scope.isSeen = true;
  $scope.icon;
  $scope.forecast = [];

  $scope.toggle = function() {
    $scope.isHidden = !$scope.isHidden;
    $scope.isSeen = !$scope.isSeen;
  };

  $scope.generateQuote = function() {

    $http({
      method: 'GET',
      url: 'http://ip-api.com/json'
    }).then(function successCallback(response) {

      $scope.state = response.data.regionName;
      $scope.city = response.data.city;
      $scope.lon = response.data.lon;
      $scope.lat = response.data.lat;
      weatherurl = 'http://api.openweathermap.org/data/2.5/weather?lat=' + $scope.lat + '&lon=' + $scope.lon + '&units=imperial&APPID=999fbb3ce38f59753f3ee8ebcab7feef';
      forecast = 'http://api.openweathermap.org/data/2.5/forecast?lat=' + $scope.lat + '&lon=' + $scope.lon + '9&cnt=7&units=imperial&appid=999fbb3ce38f59753f3ee8ebcab7feef'

      $scope.getWeatherData();
      $scope.getForecastData();
    }, function errorCallback(response) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
    });
  };

  $scope.getWeatherData = function() {
    $http({
      method: 'GET',
      url: weatherurl
    }).then(function successCallback(response) {

      $scope.icon = response.data.weather[0].icon;
      $scope.temp = response.data.main.temp;
      $scope.tempC = ($scope.temp - 32) * 5.0 / 9.0;

      $scope.description = response.data.weather[0].description;

    }, function errorCallback(response) {

    });
  };

  $scope.getForecastData = function() {
    $http({
      method: 'GET',
      url: forecast
    }).then(function successCallback(response) {

      var list = response.data.list;

      list.forEach(function(entry) {
        $scope.forecast.push(entry.main.temp)
      });
      console.log( $scope.forecast);

    }, function errorCallback(response) {

    });
  };

  $scope.generateQuote();

}]);

<body>

  <div ng-app="myApp" ng-controller="MyCtrl" class="container">
    <div class="header clearfix">

      <h1 class=" text-center">Local Weather​ Display</h1>
    </div>

    <div class="jumbotron">
      <p>{{initial | date:'EEEE'}} </p>
      <p>{{initial | date:'short'}} </p>
      <h1> 
        <span ng-show="isSeen" ng-model="temp" class="span4">{{temp| number:0}}°F</span>
      <span ng-show="isHidden" ng-model="tempC" class="span4">{{tempC| number:0}}°C</span>
         <img ng-src="http://openweathermap.org/img/w/{{icon}}.png" class="img-responsive center-block">
      </h1>
       <p><a ng-click="toggle()" class="btn btn-md btn-success" href="#" role="button">F° / C°</a></p>
      <p><span ng-model="description">{{description}}</span></p>
      <p><span ng-model="city">{{city}}</span><span>, </span><span ng-model="state">{{state}}</span></p>
      
     
      
    </div>
    <table class="table" >
  <tbody>
    <tr class="success" ng-repeat="day in week">
      <th scope="row">{{day| date:'EEEE'}}</th>
      <td>{{forecast[$index] | number:0}}°F</td>
    </tr>
  </tbody>
</table>


    <footer class="footer">
      <p>By Frederick Ige</p>
    </footer>

  </div>
  <!-- /container -->


  <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
  <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>

</html>