Need to Convert a hierarchical JSON into a rowspaned html table

Question

I have a JSON structure like

$scope.data = [
        {
            "type":"Internal",
            "count": 3,
            "library" : [
                {
                "type":"Library 123",
                "count": 2,
                "version" : ["1.3","2.3"]
                },
                {
                "type":"Library 1111",
                "count": 1,
                "version" : ["556.3"]
                }

            ]
        },
        {
            "type":"External",
            "count": 3,
            "library" : [
                {
                "type":"Library 09090909",
                "count": 2,
                "version" : ["1.3","2.3"]
                },
                {
                "type":"Library 1212121212",
                "count": 1,
                "version" : ["556.3"]
                }
            ]
        }
    ]

and i need to convert it into a html table. for eg, Internal spans into 3 rows as specified in the count variable. What I tried to do in html is

<table>

    <div ng-repeat="row in data">
        {{$root.rowFirst=true;""}}
        <div ng-repeat="lib in row.library" >
            {{$root.libFirst=true;""}}
            <div ng-repeat="ver in lib.version">
                <tr>

                    <td ng-if="$root.rowFirst" rowspan="{{row.count}}">{{row.type}}  {{$root.rowFirst=false;""}}</td>
                    <td ng-if="$root.libFirst" rowspan="{{lib.count}}">{{lib.type}}  {{$root.libFirst=false;""}}</td>
                    <td>{{ver}}</td>
                </tr>
            </div>
        </div>
    </div>

    </table>

but i got an angularjs infdig error. can anyone help me to build the html table.

Final result should be something like this

                                  1.3
                  Library 123     2.3   
Internal          Library 1111    556.3


                                  1.3
                  Library 123     2.3   
External          Library 1111    556.3        

Answer 1

Instead of looping in the view (html), I iterate each inside the controller and built a new single array containing all the information i need

    $scope.dataMod = [];
    var newType , newLib, tempObj;

    angular.forEach($scope.data, function(type, key) {
          newType =true ;
          angular.forEach(type.library, function(lib, key) {
            newLib = true;
            angular.forEach(lib.version, function(ver, key) {
                tempObj = {};
                if(newType) {
                    tempObj.typeName = type.type;
                    tempObj.typeCount = type.count;
                    newType=false;
                }
                if(newLib) {
                    tempObj.libName = lib.type;
                    tempObj.libCount = lib.count;
                    newLib=false;
                }
                tempObj.version = ver;
                $scope.dataMod.push(tempObj);

            });

          });
    });

and in the html

    <table border="1" width="100%"  >
        <tr ng-repeat="data in dataMod">
            <td ng-if="data.typeCount" rowspan="{{data.typeCount}}">{{data.typeName}}</td>
            <td ng-if="data.libCount" rowspan="{{data.libCount}}">{{data.libName}} </td>
            <td> {{data.version}}</td>
        </tr>
    </table>