Unable to access user input in a function called from ng-repeat

Question

I am new to Angular and may be missing something obvious. I did read the ng-model scope documentation. And followed the recommendation to use an object instead of primitives.

I also tried the $parent suggested by a few others here. That didn't help either.

I have read many Q&As here involving ng-repeat. But they are talking about an input inside an ng-repeat. In my case there is only one text box. I am trying to search inside a tree using ng-repeat.

<script type="text/ng-template" id="tree_item_renderer.html">
  {{data.name}}
  <ul>
    <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"  ng-show="visible(data)"></li>
  </ul>
</script>

This is the function being called:

 $scope.visible = function(item) {
  console.log("SearchText inside visible: " + $scope.input.searchText);
  return !($scope.input.searchText && $scope.input.searchText.length > 0
              && item.title.indexOf($scope.input.searchText) == -1);
    };

Take a look at my jsFiddle

Answer 1

I saw your code on the jsFiddle. There is an issue that you called ng-controller="TreeController" twice and initialized ng-app = Application. I have commented out these two lines of code, and you can see the change on the console.

The reason why you are getting this problem is you make Angular to re-initialize TreeController which it clears the value of input.searchText.

Check out the working jsFiddle !

<div ng-app="myApp">
  <div ng-controller="TreeController">
    Search UIC:
    <input type="text" ng-change="search()" ng-model="input.searchText" 
            placeholder="Enter your search terms" />
    <!-- <ul ng-app="Application" ng-controller="TreeController"> -->
    <ul>
      <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"  ng-show="visible(data)">
      </li>
    </ul>
  </div>
</div>