title: Angular JS: ng-repeat with dynamic ng-model
body: <p>I have this <strong>working</strong> piece of code that is repeated multiple times, hence would be great for a ng-repeat loop.
  For example, two instances of my code are the following.</p>
  
  <pre><code>    &lt;div&gt;
          &lt;input type="text" ng-model="searchParamaters.userName" placeholder="User Name"/&gt;
          &lt;i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[0].param)" ng-show="showParam(filterParamDisplay[0].param)"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;input type="text" ng-model="searchParamaters.userEmail" placeholder="User Email"/&gt;
          &lt;i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[1].param)" ng-show="showParam(filterParamDisplay[1].param)"&gt;&lt;/i&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This is the filterParamDisplay array in Javascript:</p>
  
  <pre><code>    $scope.filterParamDisplay = [
          {param: 'userName', displayName: 'User Name'},
          {param: 'userEmail', displayName: 'User Email'}
      ];
  </code></pre>
  
  <p>I have been trying to do that into a ng-repeat loop, but without success so far.
  This is what I have coded atm.</p>
  
  <pre><code>    &lt;div ng-repeat="param in filterParamDisplay"&gt;
          &lt;input type="text" ng-model="searchParams[{{param}}]" placeholder="{{param.displayName}}"/&gt;
          &lt;i class="fa fa-times" ng-click="resetSearchField(filterParamDisplay[$index].param)" ng-show="showParam(filterParamDisplay[$index].param)"&gt;&lt;/i&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The problems are into the ng-model variable above, and into the $index in the ng-click and ng-show.
  Not sure if this can be done at all, any help is much appreciated, thanks!</p>
  
  <hr>
  
  <p>UPDATE:
  Thanks for all the answers, using</p>
  
  <pre><code>     &lt;div ng-repeat="p in filterParamDisplay"&gt;
  ...
     ng-model="searchParams[p]" 
  </code></pre>
  
  <p>Works great!</p>
  
  <p>Still struggling on the showParam and resetSearchField functions which do not work properly yet using $index. Here is my code.</p>
  
  <pre><code>    $scope.searchParams = $state.current.data.defaultSearchParams;
  
      $scope.resetSearchField = function (searchParam) {
          $scope.searchParams[searchParam] = '';
      };
  
      $scope.showParam = function (param) {
          return angular.isDefined($scope.searchParams[param]);
      };
  </code></pre>