Title: Array won't load when you first click on the link Angularjs?
Tags: javascript;jquery;arrays;angularjs;json
Question: ```// SETTING UP SERVICES

app.service("PictureService", function($http) {
  var Service = {};
  Service.pictureLinkList = [];

  // GETTING PICTURE LINKS FOR PAGE

$http.get("data/img_location.json")
 .success(function(data) {
  Service.pictureLinkList = data;
})
.error(function(data,status) {
  alert("Things went wront!");
});

Service.findImgById = function(id) {
  for(var item in Service.pictureLinkList) {
    if(parseInt(Service.pictureLinkList[item].id) === parseInt(id)) {
    return Service.pictureLinkList[item];
  }
 }
}

return Service;
});

// COMMENT SERVICE START*****************************************
app.service("CommentService", function($http) {
  var comService = {};
  comService.commentList = [];

// GETTING COMMENTS FROM JSON FILE

$http.get("data/comments.json")
  .success(function(response){
      comService.commentList = response;

      for(var item in comService.commentList){
        comService.commentList[item].date = new Date(comService.commentList[item].date).toString();
      }
  })
  .error(function(data,status){
      alert("Things went wrong!");
  });

comService.findCommentById = function(id) {
  var comArr = [];
  for(var item in comService.commentList) {
    if(parseInt(comService.commentList[item].imgId) === parseInt(id)) {
    comArr.push(comService.commentList[item]);
  }
}
return comArr;
};

return comService;
});


// Controller
app.controller("pictureDetails", ["$scope", "PictureService", "CommentService", "$routeParams",  function($scope, PictureService, CommentService, $routeParams) {
$scope.imgById = PictureService.findImgById($routeParams.id);
$scope.commentsById = CommentService.findCommentById($routeParams.id);
}]);
```

Here is the HTML:

```<ul&gt;
   <li ng-repeat="item in commentsById"&gt;
    <div class="panel panel-primary text-center"&gt;<h3&gt;Posted by: {{    item.postedBy }} at </h3&gt;<p&gt;{{ item.date }}</p&gt;</div&gt;
    <div class="panel-body text-center"&gt;{{ item.comment }}</div&gt;
  </li&gt;
```



Comments.json file:

``` [
 {"id": 1, "imgId": 1, "comment": "Pretty good sketching there pal!", "date": "October 1, 2014 11:13:00", "postedBy": "John"},
 {"id": 2, "imgId": 1, "comment": "Nice one keep working on your skills", "date": "January 17, 2016 11:48:00", "postedBy": "John"}
]
```

First of all, I have just started using Angularjs and really like it as a framework. The problem is when I load the html page $http service reads the json file and returns objects which gets assigned to an array. Then i use ng-repeat to go through the array and read values.

When i load the page first time the array is empty, i click on a link and go back then the array and the page gets loaded. why is that?

If I am not clear with my question please let me know. Any help is greatly appreciated.


Here is the accepted answer: ```$scope.$watch( function(){ return CommentService.commentList; }, function(comments) {
for(var item in comments) {
  if(parseInt(comments[item].imgId) === parseInt($routeParams.id)) {
    $scope.commentsById.push(comments[item]);
  }
}
console.log($scope.commentsById);
});
$scope.commentsById = [];
```

adding this piece to the controller worked, was reading a book on Angularjs and they explained it like $watch variables watches any given array and assigns it to anything. 

If need more explanation let me know. It works perfectly now, i click on it once and the comments are loaded. Loads the whole comment array in one attempt.



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:01/19/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery><arrays><angularjs><json>', 'Title': "Array won't load when you first click on the link Angularjs?", 'ViewCount': 41, 'id': 34867376, 'user_AboutMe': None, 'user_AccountId': 3031917.0, 'user_DisplayName': 'Ali', 'user_Reputation': 23.0, 'user_Views': 14.0, 'user_id': 2570751.0}}