 <p>Your plunkr wasn't working because your script tag was pointing to a not existing <code>app.js</code> in <code>index.html</code> after re-naming <code>script.js</code> to <code>app.js</code> the plunkr is working.</p> <p>Your JSON mock seems a bit complicated. You can easily add a json file to the plunkr and load it with a <code>$http.get()</code> request.</p> <p>Please have a look at the demo below and this <a href="http://plnkr.co/edit/klCx13NmuHFJC7B6fv00?p=preview" rel="nofollow">updated plunkr</a>.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>// Code goes here /* var mockDataForThisTest = "json=" + encodeURI( JSON.stringify([ { name: "Dave", email: "dave@gmail.com", option: "Home", number: "1234567890" }, { name: "John", email: "jon@gmail.com", option: "Home", number: "1234567890" } ]));*/ var app = angular.module('angularApp', []); app.controller('MainCtrl', function($scope, $http) { $scope.choices = []; loadChoices(); function loadChoices() { var httpRequest = $http({ method: 'GET', url: 'https://www.mocky.io/v2/5758817a130000f82d896c76' //url: './example.json' //data: mockDataForThisTest }).then(function(response) { //success(function(data, status) { // use then --&gt; newer syntax console.log(response.data); $scope.choices = response.data; }); }; $scope.addNewChoice = function() { var newItemNo = $scope.choices.length + 1; $scope.choices.push({ 'id': 'choice' + newItemNo }); }; $scope.removeChoice = function(index) { //var lastItem = $scope.choices.length - 1; $scope.choices.splice(index, 1); //lastItem); }; });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt; &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/&gt; &lt;div ng-app="angularApp" ng-controller="MainCtrl"&gt; &lt;fieldset data-ng-repeat="choice in choices"&gt; &lt;input type="text" ng-model="choice.name" name="" placeholder="Enter name"&gt; &lt;input type="text" ng-model="choice.email" name="" placeholder="Enter email"&gt; &lt;input type="text" ng-model="choice.number" name="" placeholder="Enter mobile number"&gt; &lt;select ng-model="choice.option"&gt; &lt;option value&gt;Select&lt;/option&gt; &lt;option value="Mobile"&gt;Mobile&lt;/option&gt; &lt;option value="Office"&gt;Office&lt;/option&gt; &lt;option value="Home"&gt;Home&lt;/option&gt; &lt;/select&gt; &lt;button class="remove" ng-click="removeChoice($index)"&gt;-&lt;/button&gt; &lt;/fieldset&gt; &lt;button class="addfields" ng-click="addNewChoice()"&gt;Add fields&lt;/button&gt; &lt;div id="choicesDisplay"&gt; {{ choices }} &lt;/div&gt; &lt;/div&gt;</code></pre> </div> </div> </p>