AngularJS multidimensional Array

I have the following JSON:

{
   "records":[
      {
         "TrackID":"4",
         "ownerID":"14",
         "name":"Test1",
         "minTime":"2015-04-08T16:50:51Z",
         "maxTime":"2015-04-08T17:26:39Z",
         "tracks":[
            {
               "lat":"53.3996905",
               "long":"-2.92532816666667",
               "time":"2015-04-20T06:34:46Z",
               "hour":6
            },
            {
               "lat":"53.3997495",
               "long":"-2.92545483333333",
               "time":"2015-04-20T06:35:01Z",
               "hour":6
            },
            {
               "lat":"53.4008018333333",
               "long":"-2.9253085",
               "time":"2015-04-20T06:35:13Z",
               "hour":6
            }
         ]
      }
   ]
}

and I'm trying to output each "ownerID", then each "lat" and "long" associated with the ownerID. I'm using the following:

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
   $http.get("path to json")
   .success(function (response) {
       $scope.dataModel = response.records;
       });
});

and then (HTML)

<div ng-app="myApp" ng-controller="customersCtrl">

<table>
  <tr ng-repeat="trackInfo in dataModel">
    <td>
    {{ trackInfo.ownerID}}
    </td>
  </tr>

  <tr ng-repeat="trackDetails in trackInfo">
    <td>
    {{ trackDetails.lat }}
    </td>
  </tr>

</table>

</div>

It outputs the ownerID's but not the tracks?? Has anyone any idea why please? Thanks...

Well that's because your second repeat doesn't know what trackInfo is. It just doesn't exist at the moment of ng-repeat. You have to nest it. But then you, still have to specify pointer to 'tracks', or else you will iterate over wrong dataset. This should work:

<table>
  <tr ng-repeat="trackInfo in dataModel">
    <td>
    {{ trackInfo.ownerID}}
    </td>
    <td ng-repeat="trackDetails in trackInfo.tracks">
    {{ trackDetails.lat }}
    </td>
  </tr>  
</table>

Each ng-repeat has its own scope. Your second repeat is outside of the scope of the first, so it won't behave as you want it to.

Anger provides ng-repeat-start and ng-repeat-end which allow you to put more than one element within your repeat. That's one way you can accomplish what you want:

<tr ng-repeat-start="trackInfo in dataModel.records">
    <td>{{ trackInfo.ownerID}}</td>
</tr>
<tr ng-repeat="trackDetails in trackInfo.tracks">
    <td>{{ trackDetails.lat }}</td>
</tr>
<tr ng-repeat-end></tr>

(though the above is a bit sloppy because it has an empty tr to close the repeat).

Here is a fiddle to show it working with your code: http://jsfiddle.net/0x6prusv/

In your iterate You have not any key which is unique in all item. so angular can not iterate over your collection. in this situation You should define how to iterate. this is a simplest way :

 <tr ng-repeat="trackInfo in dataModel track by $index">

$index filled by angular.