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.

Answer 1

drop value="{{name}}" and assign to your model (eg $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/