Why this is not working in AngularJS

Question

My HTML goes like this

<div ng-controller = "AppControl">
   <input type="text" id="nameText" ng-model="yourName" value="{{name}}">
   <h1>You are typing : {{yourName}}</h1>
</div>

And JavaScript is here

var Application = {};
var App = angular.module('Application', []);
function AppControl($scope){
  $scope.name = "Name";
}

My expected result is : "Name" should come in textbox as it was assigned through $scope. As textbox is model, so <h1> tag should be updated with initial value and should be changed whenever I update it. But When I update it is updating value, but initial value is not coming in text box.

Yoshi · Accepted Answer · 2013-02-15 11:11:44Z

2

drop value="{{name}}" and assign to your model (e.g. $scope.yourName= "Name";). Angular will handle the rest.

<div ng-controller="AppControl">
   <input type="text" id="nameText" ng-model="yourName">
   <h1>You are typing : {{yourName}}</h1>
</div>

var Application = {};
var App = angular.module('Application', []);
function AppControl($scope){
  $scope.yourName = "Name";
}

demo: http://jsbin.com/efadal/1/

answered Feb 15, 2013 at 11:11

Yoshi

54.8k14 gold badges93 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why this is not working in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related