title: Change Image when Page Refresh in angularJS
body: <p>This is on of tough task that am facing in my school. am totally new to angularJs. i need to fetch one image out of all retrieved images from the database. And then when i refresh the page the next image want to appear.</p>
  
  <p>for an example first "banner.jpg" appear when i refresh the page "banner1.jpg" want to appear. can anyone help me to do solve this problem. please.</p>
  
  <p>This is my retrieved Json</p>
  
  <pre><code>{
      "id": 1,
      "path": "Content/Banner/banner.jpg"
    },
    {
      "id": 2,
      "path": "Content/Banner/banner1.jpg"
    },
    {
      "id": 3,
      "path": "Content/Banner/banner2.jpg"
    },
    {
      "id": 4,
      "path": "Content/Banner/banner3.jpg"
    },
  </code></pre>
  
  <p>my angular controller.</p>
  
  <pre><code>appGM.controller('bannerCtrl', ['$scope', '$http', 'urls', function ($scope, $http, urls) {
  var request = $http({
      method: 'GET',
      url: urls.api + 'Banner/Banners'
  
  }).success(function (data, status) {
  
      console.log(data);
      console.log(JSON.stringify(data));
      console.log(JSON.parse(JSON.stringify(data)));
  
      $scope.BBanner = angular.fromJson(data);
  
  })
   .error(function (error) {
       $scope.status = 'Unable to load dog images: ' + error.message;
       console.log($scope.status);
   });
  </code></pre>
  
  <p>And its my Html</p>
  
  <pre><code>&lt;div class="row"&gt;
           &lt;div class="col-sm-3 sidenav" ng-repeat="d in BBanner"&gt;
                          &lt;img ng-src="{{d.path}}"&gt;
      &lt;/div&gt;
  </code></pre>