title: how to properly use recursive function call to return the property of a nested object?
body: <p>In my Angular app, I'm using AngularTree directive (<a href="http://wix.github.io/angular-tree-control" rel="nofollow">http://wix.github.io/angular-tree-control</a>) to render a tree view of the following data structure:</p>
  
  <pre><code>$scope.subjectAreas = [
          {
              name:   "Area-1",
              link:   "dashboards.dashboard_1",
              entities: [
                  {
                      name: "entity 1"
                  },
                  {
                      name: "entity 2"
                  }
              ]
          },
          {
              name:   "Area-2",
              link:   "dashboards.dashboard_1",
              entities: [
                  {
                      name: "entity 3"
                  }
              ]
          },
          {
              name:   "Area-3",
              link:   "dashboards.dashboard_1",
              entities: [
                  {
                      name: "entity 4"
                  },
                  {
                      name: "entity 5"
                  },
                  {
                      name: "entity 6"
                  }
              ]
          }
      ];
  </code></pre>
  
  <p>This treeView directive provides the "createSubTree" function, which I'm using as follows:</p>
  
  <pre><code>function createSubTree(level, width, prefix) {
          if (level &gt; 0) {
              var res = [];
              for (var i=1; i &lt;= width; i++)
                  res.push({ "label" : getName(i), "id" : "id"+prefix + i, "i": i,
                      "children": createSubTree(level-1, setNumberOfChildren(getName(i),i), prefix + i +".")});
              return res;
          }
          else
              return [];
      }
  </code></pre>
  
  <p>Here are my supporting functions:</p>
  
  <pre><code>function countNumberOfEntities(index){
  
          return $scope.subjectAreas[index].entities.length;
      }
  
      function getSubjectAreasLength(){
          return $scope.subjectAreas.length;
      }
  
      function setNumberOfChildren(subjectArea, index){
          var numberOfChildEntities = countNumberOfEntities(index-1);
          return numberOfChildEntities;
      }
  
      function getName(index){
          if($scope.subjectAreas[index-1]){
              var subjectAreaName = $scope.subjectAreas[index-1].name;
              var n = subjectAreaName;
              return subjectAreaName;
          }
      }
  </code></pre>
  
  <p>The tree view renders fine, but all children (names of entities, which belong to a given SubjectArea) end up having the same names as their parent (SubjectArea).</p>
  
  <p>The current rendering looks like this:</p>
  
  <pre><code>Area-1
     Area-1
     Area-2
  Area-2
     Area-1
  Area-3
     Area-1
     Area-2
     Area-3
  </code></pre>
  
  <p>What this needs to look like is:</p>
  
  <pre><code>Area-1
     Entity-1
     Entity-2
  Area-2
     Entity-3
  Area-3
     Entity-4
     Entity-5
     Entity-6
  </code></pre>
  
  <p>How can I modify this "createSubTree" function to return the name of each entity, when it is being called recursively here:  <code>"children": createSubTree(level-1, setNumberOfChildren(getName(i),i), prefix + i +".")});</code></p>