AngularJS template

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout, $q) {
  
  var person = {"name": "Bill Gates"}
  
  var deferList = $q.defer();
  var deferSingle = $q.defer();
  
  // Bind the person object directly to the scope. This is editable.
  $scope.direct = person;       
  
  // Bind a promise to the scope that will return a list of people. This is editable.
  $scope.list   = deferList.promise;
  
  // Bind ap romise to the scope that will return a single person record. This is *not* editable.
  $scope.single = deferSingle.promise;
  
  // Resolve the promises
  $timeout( function(){
    deferList.resolve( [person] );  // Array
    deferSingle.resolve( person );  // Just the record itself
  }, 100);
  

});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    Directly Bound - Editable:    
    <input ng:model="direct.name"/>
    <hr/>
    Singleton Promise - Not Editable - Why?:
    <input ng:model="single.name"/>    
    <hr/>
    List Promise - Editable.
    <div ng:repeat="person in list">
      <input ng:model="person.name"/>  
    </div>
    
  </body>

</html>

/* Put your css in here */