AngularJS : Two-way data binding

AngularJS : Two-way data binding

HTML

<div ng-app="app" ng-controller="DataBindingController as vm">
  <div style="margin-top:15px;">
    <label>Firstname</label>
    <input ng-change=ng-model="vm.firstname" />
  </div>
  <div style="margin-top:15px;">
    <label>Lastname</label>
    <input ng-model="vm.lastname" />
  </div>
  <button style="margin-top:15px;" ng-click="vm.update()">Update binding from controller</button>
  <pre style="margin-top:40px;">
     <strong>Data model 'vm'</strong>
     {{vm}}
   </pre>
</div>

JavaScript

angular
  .module('app', [])
  .controller('DataBindingController', DataBindingController)

function DataBindingController() {

  var vm = this;
  vm.firstname = "";
  vm.lastname = "";

  vm.update = function() {
    vm.firstname = "Creative";
    vm.lastname = "Geeks";
  }

}