One-time binding example

by Michael Hunziker

HTML

<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.css">
<div ng-app="app" ng-controller="MyController">
    
    <button ng-click="clickMe()">Click</button>
    <p>One-time binding: {{ ::color }}</p>
    <p>Default binding: {{ color }}</p>
    
    
    <div ng-if="test" class="lock icon">
    Test
    </div>

</div>

CSS

/* ICONS */
.icon:before{font:28px/1 'HeydingsCommonIconsRegular';height:28px;width:28px;margin:2px 15px 2px...

JavaScript

angular.module("app", []) 
.controller("MyController", function($scope){
    var counter = 0;
    var colors= ['green', 'red', 'blue', 'yellow'];
    $scope.test = false;
    $scope.clickMe = function() {
    		$scope.test = !$scope.test;
        $scope.color = colors[counter % colors.length];
        counter++;
    }
});