Data isn't rendering in angular view

Question

When I try to access test json data, it retrieves the data. however it won't display within my template

app.js:

var listController = angular.module('ngAppListDemo', []); 

listController.controller('listControl', ['$scope', '$http', function ($scope, $http){
   $scope.list = [];
    var urlTest = 'https://mysafeinfo.com/api/data?list=englishmonarchs&format=json'; // url 
    //var testData = 'http://raw.githubusercontent.com/zemirco/sf-city-lots-json/master/citylots.json'; // .json format
    $http({method: 'GET', url: urlTest}).success(function(data, status, headers, config) {
        $scope.list = data;
        console.log(data);         
    });
}]);

index.html

 <div ng-app="ngAppListDemo">
    <div ng-controller="listControl">
        <div class="row" ng-repeat="item in list">
          <p>{{item.nm}}</p>
        </div><!-- end list item -->
      </div>
    </div>

data looks like this within url:

[
  {
    "nm": "Edmund lronside",
    "cty": "United Kingdom",
    "hse": "House of Wessex",
    "yrs": "1016"
  },
  {
    "nm": "Cnut",
    "cty": "United Kingdom",
    "hse": "House of Denmark",
    "yrs": "1016-1035"
  },
  {
    "nm": "Harold I Harefoot",
    "cty": "United Kingdom",
    "hse": "House of Denmark",
    "yrs": "1035-1040"
  }
]

It's repeating within the template fine. but the data inbetween the <p> tags {{ item.nm }} doesn't show. What am I missing?

Edit: It appears that ng-binding is missing once rendering.

Answer 1

working example : http://plnkr.co/edit/DeO5fmub16hXutOmylBu?p=preview

try this

var listController = angular.module('ngAppListDemo', []); 

listController.controller('listControl', ['$scope', '$http', function ($scope, $http){
   $scope.list = [];
    var urlTest = 'https://mysafeinfo.com/api/data?list=englishmonarchs&format=json'; // url 
    //var testData = 'http://raw.githubusercontent.com/zemirco/sf-city-lots-json/master/citylots.json'; // .json format


    $http({
         method: 'GET',
         url: urlTest
      }).then(function successCallback(response) {
          // the data is in response.data (or data.data using your old paramater name)  not data directly   
          $scope.list = response.data;
           console.log(response.data); 
           // update 1
           $scope.$apply();
      }, function errorCallback(response) {

      });
}]);

// update 1: try a $scope.$apply() to force the view to update

Answer 2

Seems to be working fine. Created a demo using same html

<div ng-app="ngAppListDemo">
<div ng-controller="listControl">
    <div class="row" ng-repeat="item in list">
      <p>{{item.nm}}</p>
    </div><!-- end list item -->
  </div>
</div>

May be your css would be having the font and back ground colour same

Answer 3

After comparing dev inspection from answers with demos. I noticed that I was missing class="ng-binding".

I added :

 <span ng-bind="item.nm"></span>

https://docs.angularjs.org/api/ng/directive/ngBind