Ng-Non-Bindable-3

In this example we can display value of Arrs object using ng-repeat directive but in other case we display {{Arr.val}} as it because ng-non-bindable directive will not compile the data.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="controllerName">
        <span ng-repeat="Arr in Arrs">
            Normal: {{Arr.val}}<br />
            <i ng-non-bindable>Non-Bindable: {{Arr.val}}</i><br />
        </span>
    </div>
<script>
    var app = angular.module("app", []);
    app.controller('controllerName', ['$scope', function ($scope) {
        $scope.Arrs = [{ val: 1+2 }, { val: 5*3 }, { val: 20/5 }, { val: 10-4 }];
    }]);
</script>
</body>
</html>

Output