title: How to properly execute a function inside ng-repeat
body: <p><strong>SITUATION:</strong></p>
  
  <p>I am making an app in AngularJs that assign permissions.
  In order to do this i have three nested ng-repeat.</p>
  
  <p><em>First loop</em>: display PERMISSION GROUP</p>
  
  <p><em>Second loop</em>: For each permission group display CATEGORIES. 
  Inside this loop execute a function that will get all the SUB CATEGORIES for each category</p>
  
  <p><em>Third loop</em>: display SUB CATEGORIES</p>
  
  <p><strong>ISSUE:</strong></p>
  
  <p>The problem is in the execution of the function inside the second loop.</p>
  
  <p><strong>ATTEMPT 1 - ng-init:</strong></p>
  
  <pre><code>&lt;div class="row" ng-repeat="permission_group in list_permission_groups"&gt;
    &lt;div class="col-sm-3"&gt;
      &lt;h3&gt;
        {{permission_group.permission_group_name}} 
      &lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-9"&gt;
      &lt;ul&gt;
        &lt;li ng-repeat="category in list_categories"&gt;
          &lt;span&gt;
            {{ category.name }} 
          &lt;/span&gt;            
          &lt;div class="checkbox"&gt;
            &lt;label&gt;                
              &lt;div ng-init="temp_result = get_Sub_Categories(category.category_id)"&gt;                  
                &lt;p ng-repeat="sub_category in temp_result"&gt;
                  {{ sub_category.name }} 
                &lt;/p&gt;                  
              &lt;/div&gt;               
            &lt;/label&gt;
          &lt;/div&gt;           
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the controller:</p>
  
  <pre><code>$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;
  
      });
  
  }
  </code></pre>
  
  <p>Te behavior is quite strange. Porbably due to dirty checking the page is loaded 682 times. 
  No result is displayed. </p>
  
  <p><strong>ATTEMPT 2 - ng-click: (only for debug)</strong> </p>
  
  <pre><code>&lt;div class="row" ng-repeat="permission_group in list_permission_groups"&gt;
  
    &lt;div class="col-sm-3"&gt;
  
      &lt;h3&gt;
        {{permission_group.permission_group_name}} 
      &lt;/h3&gt;
  
    &lt;/div&gt;
  
    &lt;div class="col-sm-9"&gt;
      &lt;ul&gt;
        &lt;li ng-repeat="category in list_categories"&gt;
          &lt;span&gt;
            {{ category.name }} 
          &lt;/span&gt;
  
          &lt;div class="checkbox"&gt;
            &lt;label&gt;
  
              &lt;button ng-click="get_Sub_Categories(category.category_id)"&gt;
                GET SUB-CATEGORIES
              &lt;/button&gt;
  
              {{ list_sub_categories }} 
  
            &lt;/label&gt;
          &lt;/div&gt;
  
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the controller:</p>
  
  <pre><code>$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;
  
      });
  
  }
  </code></pre>
  
  <p>This time the page is loaded only once.
  If I press the button the proper sub-categories are displayed BUT of course not only for the corresponding category but FOR ALL, because i am modifying the var in the global scope.</p>
  
  <p><strong>THE AIM:</strong></p>
  
  <p>What I want to obtain is simply displaying all the proper sub-categories for each category. 
  Without using a button, but simply see all the proper content as soon as the page load.
  But i don't understand how can this be done properly in AngularJs.</p>
  
  <p><strong>THE QUESTION:</strong></p>
  
  <p>How can i properly execute a function inside a ng-repeat that return and display different data for each loop?</p>
  
  <p><strong>EDIT</strong> - DUMP OF EXAMPLE OF SUB-CATEGORIES FOR ONE CATEGORY:</p>
  
  <pre><code>[{
      "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"
  }]
  </code></pre>