I'm having a simple html form like this

<div ng-app="app">
    <form action="" ng-controller="testController" id="parent">
    </form>
</div>

And now I want to add an input field from javascript

var app = angular.module('app',[]);
app.controller('testController',testController);
function testController($scope){
    var input = document.createElement('input');
    var form = document.getElementById('parent');

    input.setAttribute("type","number");
    input.setAttribute("id","testId");
    input.setAttribute("name", "test");
    input.setAttribute("ng-model","test");  
    form.appendChild(input);
}

The input field also get's generated as expected

<input type="number" id="testId" name="test" ng-model="test">

but the ng-model between this input field and $scope.test is not working.

I'm having a simple html form like this

<div ng-app="app">
    <form action="" ng-controller="testController" id="parent">
    </form>
</div>

And now I want to add an input field from javascript

var app = angular.module('app',[]);
app.controller('testController',testController);
function testController($scope){
    var input = document.createElement('input');
    var form = document.getElementById('parent');

    input.setAttribute("type","number");
    input.setAttribute("id","testId");
    input.setAttribute("name", "test");
    input.setAttribute("ng-model","test");  
    form.appendChild(input);
}

The input field also get's generated as expected

<input type="number" id="testId" name="test" ng-model="test">

but the ng-model between this input field and $scope.test is not working.

• javascript
• angularjs
• angular-ngmodel

Share Improve this question Follow asked Jul 31, 2015 at 8:07 tungtung 77922 gold badges1515 silver badges3131 bronze badges 2

• 2 it is a wrong practice to do dom manipulation in controller... you need to plile the new element using $pile service – Arun P Johny Commented Jul 31, 2015 at 8:09
• Use a directive for DOM manipulation and pile – Hmahwish Commented Jul 31, 2015 at 8:15

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Important: You should not make dom manipulation in a cotroller, you need to use a directive to do that.

That said, even in a directive if you are creating a dynamic element you need to pile it to have angular behavior applied to it.

var app = angular.module('app', [], function() {})

app.controller('testController', ['$scope', '$pile', testController]);

function testController($scope, $pile) {
  var input = document.createElement('input');
  var form = document.getElementById('parent');

  input.setAttribute("type", "number");
  input.setAttribute("id", "testId");
  input.setAttribute("name", "test");
  input.setAttribute("ng-model", "test");
  $pile(input)($scope)
  form.appendChild(input);
}

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <form action="" ng-controller="testController" id="parent">
    <div>test: {{test}}</div>
  </form>
</div>