javascript - How do I loop through this Json object (angularJS)? -

i'm trying loop through "tabs" in json object using angularjs? how can it?

var model = {     "$id": "1",     "tabs": [{         "$id": "2",         "id": 2,         "name": "output",         "layoutid": 1,         "order": 1,         "dashboardid": 1     }, {         "$id": "15",         "id": 3,         "name": "yield",         "layoutid": 1,         "order": 2,         "dashboardid": 1     }, {         "$id": "24",         "id": 4,         "name": "trend",         "layoutid": 1,         "order": 3,         "dashboardid": 1     }],     "id": 1,     "name": "test",     "title": "test",     "description": "test dashboard",     "createdate": "2015-06-08t00:00:00+01:00",     "ownerid": 1,     "enabled": true }; 

when try this, "undefined" in console.

angular.foreach(model.tabs, function (tab) {     console.log(tab.name); }); 

not sure i'm doing wrong?

edit: data coming asp.net controller:

$http.get("/dashboards/getdashboarddata").success(function (data) {             model = data;             angular.foreach(model.tabs, function (tab) {                 console.log(tab.name);             });         }).error(function (data) {             console.log("error");         }); 

i expect model not ready @ time loop though it. run following code inspector open - code have correct, in case fails because model isn't ready when run loop.

if you're loading data asyncronously you'll want wait until data returned, either using promise or callback, , loop through it.

var model = {      "tabs": [{          "name": "output",      }, {          "name": "yield",      }, {          "name": "trend",      }],  };    angular.foreach(model.tabs, function (tab) {      console.log(tab.name);  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>