title: Boostrap Tabs with Angular js
body: <p>I am using a tabset and sets of different tabs of angular ui bootstrap. </p>
  
  <p>I would like to move in a click to some tab. 
  Moreover, i would like to know which of the tabs is opened right now.</p>
  
  <p>I created a variable in service called currentTab.</p>
  
  <p>The idea is when i am clicking in a tab, the current tab is updated. 
  I can move between the tabs , however, i got an error message in console:   "Expression '{0}' used with directive '{1}' is non-assignable!"</p>
  
  <p>Moreover, I have to draw every tab different.</p>
  
  <p>Any ideas?</p>
  
  <pre><code> &lt;tabset&gt;
      &lt;tab active="currentService.isCurrentTabEqualsGivenName('tab1')" ng-click="currentService.setCurrentTab('tab1')"&gt;
          &lt;tab-heading&gt;&lt;span class="badge"&gt;3&lt;/span&gt;  &lt;span&gt;Tab 1&lt;/span&gt;
          &lt;/tab-heading&gt;
  
            SOMETHING
      &lt;/tab&gt;
       &lt;tab active="currentService.isCurrentTabEqualsGivenName('tab2')" ng-click="currentService.setCurrentTab('tab2')"&gt;
          &lt;tab-heading&gt;Tab 2&lt;/tab-heading&gt;
            SOMETHING
           &lt;/tab&gt;
   &lt;/tabset&gt;
  </code></pre>
  
  <p>CurrentService: </p>
  
  <pre><code> app.service('CurrentService', [
                function () {
  
   this.currentTab = "tab1";
  
   this.isCurrentTabEqualsGivenName = function(name){
          return this.currentTab === name;
      };
  
      this.setCurrentTab = function(name){
          if (this.currentTab !== name)
              this.currentTab = name;
      };
   }]);
  </code></pre>