Angular ng-repeat scope issue

Question

Nothing in my {{}} are showing in my html file. Can someone please tell me what I am doing wrong. I have no errors in my console.

"GOT DATA" will print in my console, but not show in my file.

The is my html code

<div class="announcements" ng-controller="onBusinessAnnouncementCtrl as announcements">
     {{announcements.latest}}
</div>

This is my js code pulling from the server

app.controller('onBusinessAnnouncementCtrl', function($scope, $http) {

   $http.get('http://localhost:3000/latest')
    .success(function(responses) {
      //$scope.latest = responses;
      $scope.latest = "GOT DATA";
      console.log($scope.latest);
    });
});

Answer 1

Because you use the controller as syntac you should apply the variables in your controller to this instead of $scope .

See the same problem in AngularJS Ng-repeat is not working as expected where a repeater was used

below the answer on the previous question: In your repeater you're looping over announcements.announcements in your controller you set $scope.announcements = response .

Either you change the repeater in ng-repeat="eachAnnouncement in announcements" or change your scope variable to: $scope.announcements = {announcements : response}

Answer 2

Figured it out! For reference: There is nothing showing in my HTML because there is no value assigned to the controller. To assign "latest" to my controller I have to do this:

app.controller('onBusinessAnnouncementCtrl', function($scope, $http) {
$http.get('http://localhost:3000/latest')
    var this = this;
    .success(function(responses) {
      this.latest = responses;
    });
});

<div class="announcements" ng-controller="onBusinessAnnouncementCtrl as announcements">{{announcements.latest}}</div>