Setting Angular variable in HTML whilst using ng-repeat - angularjs

Question

I have the following code which works great:
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" style="width: {{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}}%;background-color: #5cb85c">
{{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}}
</div>
</div>
However, as you can see, I am repeating {{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}} alot and I therefore would like to assign it to angular variable. I would also like to do an NG-switch on the result. This is what I have tried
<div class="progress progress-striped active" ng-init = "barPercentage= {{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}}">
<div ng-switch="barPercentage">
<div ng-switch-when=">=0" class="progress-bar progress-bar-success" style="width: {{barPercentage}}%;background-color: #5cb85c">
{{(p.availableIpAddressCount/p.totalIpAddressCount)*100|number:0}}
</div>
</div>
</div>
However this doesn't work at all but I'm unsure why. I get no errors in the console.
Any ideas?

Answer 1

var app = angular.module('demo', []);
app.controller('DemoCtrl', DemoCtrl);
DemoCtrl.$inject = ['$scope'];
function DemoCtrl($scope) {
// you can change this as you like. its just for demo purposes.
$scope.p = {
"availableIpAddressCount": 100,
"totalIpAddressCount": 70
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script data-require="ui-bootstrap-tpls#*" data-semver="1.2.5" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.2.5.js"></script>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link data-require="bootstrap#3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#1.3.2" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<div ng-app="demo" ng-controller="DemoCtrl">
<!--using ng-if -->
<div class="progress progress-striped active" ng-init="barPercentage= (p.availableIpAddressCount/p.totalIpAddressCount*100) | number:0">
<div ng-if="barPercentage>=0" class="progress-bar progress-bar-success" style="width: {{barPercentage | number: 0}}%;background-color: #5cb85c">
{{barPercentage |number:0}}
</div>
</div>
<!-- using ng-switch -->
<div class="progress progress-striped active" ng-init="barPercentage= (p.availableIpAddressCount/p.totalIpAddressCount*100) | number:0">
<div ng-switch on="(barPercentage>=0)">
<div ng-switch-when="true">
<div class="progress-bar progress-bar-success" style="width: {{barPercentage | number: 0}}%;background-color: #5cb85c">
{{barPercentage |number:0}}
</div>
</div>
<div ng-switch-default>
<!-- code to render the regular block -->
</div>
</div>
</div>
</div>

Answer 2

I would highly suggest that you create a variable in your controller and expose it to the scope.
$scope.barPercentage = (p.availableIpAddressCount/p.totalIpAddressCount)*100 ;
The way to do it in your html is effectively ng-init, but it's highly unrecommended in the docs.
Note that there are no AngularJS variables, rather a JavaScript object called $scope that is exposed to your template.