title: AngularJS dynamic add and remove div not working
body: <p><strong>JSON</strong></p>
  
  <pre><code>{
    "id": "1",
    "name": "T-Shirt",
    "status": "1",
    "product_attributes": [{
      "id": 1,
      "label": "Size",
      "choices": [{
        "text": "Size 30",
        "value": "Size 30",
        "isSelected": false,
        "price": "$100.00"
      }, {
        "text": "Size 32",
        "value": "Size 32",
        "isSelected": true,
        "price": "$100.00"
      }, {
        "text": "Size 34",
        "value": "Size 34",
        "isSelected": false,
        "price": "$100.00"
      }, {
        "text": "Size 36",
        "value": "Size 36",
        "isSelected": false,
        "price": "$100.00"
      }]
    }, {
      "id": 2,
      "label": "Color",
      "choices": [{
        "text": "Denim",
        "value": "Denim",
        "isSelected": true,
        "price": "$0.00"
      }, {
        "text": "Black",
        "value": "Black",
        "isSelected": false,
        "price": "$5.00"
      }, {
        "text": "Brown",
        "value": "Brown",
        "isSelected": false,
        "price": "$2.00"
      }],
    }]
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-repeat="attributes in product.product_attributes"&gt;
      &lt;h3&gt;{{attributes.name}}&lt;/h3&gt;
      &lt;div class="choice"&gt;
          &lt;h2&gt;Choices&lt;/h2&gt;
          &lt;div ng-repeat="choices in attributes.choices"&gt;
              &lt;div class="form-group"&gt;
                  &lt;input type="text" ng-model="choices.value" class="form-control"&gt; 
                  &lt;a href="" ng-click="addField()"&gt;Add&lt;/a&gt;
                  &lt;a href="" ng-click="removeField($index)"&gt;Remove&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$scope.attributes = {choices: [{label:'1'}]};
  
  $scope.getProductAndAttributes = function() {
          $http({
              method: 'POST',
              url: 'products/get_product_details.json',
              dataType: "json",
              data: {'id': $stateParams.product_id},
              headers: {'Content-Type': 'application/x-www-form-urlencoded'}
          }).success(function(data) {
              $scope.product_name = data.name;
              $scope.product_attributes = data.product_attributes;
          });
      };
  
  $scope.addField = function() {
       var newItemNo = $scope.attributes.choices.length + 1; alert(newItemNo);
          $scope.attributes.choices.push({'label': 'choice' + newItemNo});
  };
  $scope.removeField = function(i) {
     $scope.attributes.choices.splice(i, 1);
  };
  if ($stateParams.product_id) {
      $scope.getProductAndAttributes();
  }
  </code></pre>
  
  <p>Above I have posted my customize code. But my <code>Add</code> and <code>Remove</code> not not working. Please check my <code>JSON</code> this data I am getting from my database.</p>
  
  <p>Please help me.</p>