How to properly execute a function inside ng-repeat

Question

SITUATION:

I am making an app in AngularJs that assign permissions. In order to do this i have three nested ng-repeat.

First loop:

Answer 1

Calling a function inside ng-repeat is same as normal one. Since you need to display the sub categories at the time of page loading its better to get these data beforehand. Asynchronously loading sub categories will not fit into this scenario.

Here is a minimal snippet achieving this (JS Fiddle)

    
  Category: {{ category.name }} 

      
{{ subCategory.name }}
   

Controller

angular.module("app", [])
.controller('ctrl', ['$scope', function ($scope) {
$scope.model = {
    categories: [{
        "Id": 1,
        name: '1'
    }, {
        "Id": 2,
        name: '2'
    }],
    subCategories: [{
        "parentId": 1,
        name: 'a1'
    }, {
        "parentId": 1,
        name: 'a2'
    },
                   {
        "parentId": 2,
        name: 'a3'
    }]
}
$scope.getSubCategories = function(parentId){
    var result = [];
    for(var i = 0 ; i < $scope.model.subCategories.length ; i++){
        if(parentId === $scope.model.subCategories[i].parentId){
            result.push($scope.model.subCategories[i]);               
        }
    }
    console.log(parentId)
    return result;
}}])