AngularJS : One way binding vs Two way binding

AngularJS : One way binding vs Two way binding

by Daan De Smedt

HTML

<div ng-app="app" ng-controller="BasicController as vm">
  <!-- one way binding will only bind once (after first digest cycle stabalizes) -->
  <b>One way binding</b><br/>
  <pre>Changes will <b>NOT</b> be visible when the bind value is updated using '{{::}}'</pre>
  <pre>{{::vm.movieName}}</pre>
  <br/>
  <!-- Two way binding will constantly bind -->
  <b>Two way binding</b><br/>
  <pre>Changes on the value will become visible on this bind '{{}}'</pre>
  <pre>{{vm.movieName}}</pre>
  <br/>
  <button ng-click="vm.updateValue()">Update value</button>
</div>

JavaScript

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

function BasicController($scope) {
  /* declare VM */
  var vm = this;  
  vm.movieName = "The Matrix - Beginning"
  vm.updateValue = updateValue;
  
  /* functions */  
  function updateValue() {
    vm.movieName = "The Matrix - Updated"
  };
}