One Way binding in Angular 1.5

by pankaj agrawal

HTML

<script src="https://code.angularjs.org/1.5.5/angular.min.js"></script>
<div ng-app="demo" ng-controller="demoCtrl as ctrl">

  <p>
    Name (two way binding): {{ctrl.name}} 
  </p>
  <p>
    City (one way binding): {{ctrl.city}} 
  </p>

  <simple-component one-way="ctrl.city" two-way="ctrl.name"></simple-component>

</div>

CSS

span {
  font-style: italic;
  color: #AAA;
  font-size: small;
  font-weight: bold;
}

JavaScript

'use strict';
angular.module('demo', [])
  .controller('demoCtrl', function() {
    this.name = 'Royto';
    this.city = 'Grenoble';
  })
  .component('simpleComponent', {
    bindings: {
      oneWay: '<',
      twoWay: '='
    },
    template: '<div>' +
      '<p><label>City (one way binding): </label> <input type="text" ng-model="$ctrl.oneWay" /></p>' +
      '<p><label>Name (two way binding): </label> <input type="text" ng-model="$ctrl.twoWay" /></p>' +
      '</div>'
  });