title: AngularJS: Add Elements to <li> dynamically
body: <p>I am unable to populate list on clicking Add button. Problem is when I change the text field again, My List data gets changed (binding), how to avoid that?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="control-group"&gt;
      &lt;label class="control-label" for="projectManager"&gt;Project Manager(s)&lt;/label&gt;
      &lt;div class="row controls" &gt;
          &lt;input type="text" class="span3" placeholder="Manager name" ng-model="pm.name"&gt;
          &lt;input type="text" class="span2" placeholder="Manager type" ng-model="pm.type"&gt;
          &lt;button type="button" ng-click="addManagersForm()"&gt;&amp;nbsp;&amp;nbsp;Add&amp;nbsp;&amp;nbsp;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="row controls" &gt;
          &lt;ul&gt;&lt;li ng-repeat="tPm in pms"&gt;{{tPm.name}}&lt;/li&gt;&lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>app.controller('myContrl',["$scope", "$http", function($scope, $http) {
      $scope.pms = [];
  
      $scope.addManagersForm = function() {
          console.log($scope.pm);
          $scope.pms.push($scope.pm);
      };
  
  }]);
  </code></pre>