One time binding

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="myapp" ng-controller="MyCtrl">
    <p>Normal binding: <b>Hello {{name}}</b></p>
    <p>One time binding: <b>Hello {{::name}}</b></p>
    <button ng-click="chageName()">Click Me</button>
  </body>

</html>

angular.module('myapp', [])

.controller('MyCtrl', function ($scope, $timeout) {
  var names = ['Chris', 'Sam', 'Jasmin', 'Bek'];
  var idx = 0;
  
  $scope.name = names[idx]

  $scope.chageName = function () {
    $scope.name = names[++idx%names.length];
  }
  
});

/* Styles go here */