How to implement icons in angular js

Question

I want to display the icon in my tab "winner" angular. I have one file "tabs.html" in which the code for my tab is written.

<!-- some code -->
  <ion-tab  icon-off="notificationIconDisabled" icon-on="notificationIconEnabled"  href="#/tab/newjob" badge="{{newJobsCount}}" badge-style="badge-assertive">
    <ion-nav-view name="tab-newjob"></ion-nav-view>
  </ion-tab>
<!-- some code -->

I have other files like tab-setting.html, tab-myjobs.html and tab-newjobs.html. "myjobs.html" and "tab-newjobs.html" use the controller "jobCtrl.js". Now, when I try to set the icon through "jobCtrl.js" as follows,

$scope.newJobsCount = $scope.jobList.length;

I cannot do this and I get the following error in the browser for the icon

Error: [$ parse: syntax] Syntax error: token '{' invalid key in column 2 of expression [{{newJobsCount}}], starting with [{newJobsCount}}].

can someone help me with an example how to implement icons in angular js ??

Thanks in advance.

Answer 1

?

http://codepen.io/beaver71/pen/vLRYvb

http://play.ionic.io/app/52586f24b84d

http://codepen.io/calendee/pen/knyLj/

https://forum.ionicframework.com/t/badge-icons-in-tabs/626/10

, :

<ion-tab title="About" icon="ion-ios7-information" href="#/tab/about"  badge="data.badgeCount" badge-style="badge-assertive" ng-controller="AboutCtrl" >...</ion-tab>

PS: ( data.badgeCount, badgeCount)