SITUACIÓN:

Estoy haciendo una aplicación en AngularJs que asigna permisos. Para hacer esto, tengo tres ng-repeat anidados.

Primer bucle: visualizar GRUPO DE PERMISO

Segundo bucle: Para cada grupo de permisos, visualice CATEGORÍAS. Dentro de este bucle, ejecute una función que obtendrá todas las CATEGORÍAS SUB para cada categoría

Tercer bucle: mostrar SUB CATEGORÍAS

PROBLEMA:

El problema está en la ejecución de la función dentro del segundo bucle.

INTENTO 1 - ng-init:

<div class="row" ng-repeat="permission_group in list_permission_groups">
  <div class="col-sm-3">
    <h3>
      {{permission_group.permission_group_name}} 
    </h3>
  </div>
  <div class="col-sm-9">
    <ul>
      <li ng-repeat="category in list_categories">
        <span>
          {{ category.name }} 
        </span>            
        <div class="checkbox">
          <label>                
            <div ng-init="temp_result = get_Sub_Categories(category.category_id)">                  
              <p ng-repeat="sub_category in temp_result">
                {{ sub_category.name }} 
              </p>                  
            </div>               
          </label>
        </div>           
      </li>
    </ul>
  </div>
</div>

En el controlador:

$scope.get_Sub_Categories = function(category_id) {
    $http({

        url: base_url + 'main/json_get_list_sub_categories',
        data: {
            category_id: category_id
        },
        method: "POST"

    }).success(function(data) {

        return data;

    });

}

El comportamiento es bastante extraño. Probablemente debido a una comprobación sucia, la página se carga 682 veces. No se muestra ningún resultado.

INTENTO 2 - ng-click: (solo para depuración)

<div class="row" ng-repeat="permission_group in list_permission_groups">

  <div class="col-sm-3">

    <h3>
      {{permission_group.permission_group_name}} 
    </h3>

  </div>

  <div class="col-sm-9">
    <ul>
      <li ng-repeat="category in list_categories">
        <span>
          {{ category.name }} 
        </span>

        <div class="checkbox">
          <label>

            <button ng-click="get_Sub_Categories(category.category_id)">
              GET SUB-CATEGORIES
            </button>

            {{ list_sub_categories }} 

          </label>
        </div>

      </li>
    </ul>
  </div>
</div>

En el controlador:

$scope.get_Sub_Categories = function(category_id) {
    $http({

        url: base_url + 'main/json_get_list_sub_categories',
        data: {
            category_id: category_id
        },
        method: "POST"

    }).success(function(data) {

        $scope.list_sub_categories = data;

    });

}

Esta vez la página se carga solo una vez. Si presiono el botón, se muestran las subcategorías adecuadas PERO, por supuesto, no solo para la categoría correspondiente sino PARA TODOS, porque estoy modificando la var en el ámbito global.

EL OBJETIVO:

Lo que quiero obtener es simplemente mostrar todas las subcategorías adecuadas para cada categoría. Sin usar un botón, simplemente vea todo el contenido adecuado tan pronto como se cargue la página. Pero no entiendo cómo se puede hacer esto correctamente en AngularJs.

LA PREGUNTA:

¿Cómo puedo ejecutar correctamente una función dentro de una repetición ng que devuelve y muestra datos diferentes para cada bucle?

EDITAR - VOLUMEN DE EJEMPLO DE SUB-CATEGORÍAS PARA UNA CATEGORÍA:

[{
    "sub_category_id": "1",
    "name": "SUB_CATEGORY_1",
    "category_id_parent": "1",
    "status": "VISIBLE"
}, {
    "sub_category_id": "2",
    "name": "SUB_CATEGORY_2",
    "category_id_parent": "1",
    "status": "VISIBLE"
}, {
    "sub_category_id": "3",
    "name": "SUB_CATEGORY_3",
    "category_id_parent": "1",
    "status": "VISIBLE"
}, {
    "sub_category_id": "4",
    "name": "SUB_CATEGORY_4",
    "category_id_parent": "1",
    "status": "VISIBLE"
}]