Why do I get a nonassign error in the angular-bootstrap tabset?

Question

  <tabset class="paygrade-tabs">
    <tab ng-repeat="tab in rps.currentPayGrade | orderBy: 'payGrade.code' : true track by $index" ng-click="changeTab(tab)" active="activeTabId === tab.id">
      <tab-heading>
        <span>{{tab.payGrade.code}}</span>
      </tab-heading>
    </tab>
  </tabset>

This gives me an error for some reason:

Error: [$compile:nonassign] http://errors.angularjs.org/1.4.14/$compile/nonassign?p0=activeTabId%20%3D%3D%3D%20tab.id&p1=active&p2=tab
    at angular.js:38
    at q (angular.js:9157)
    at m (angular.js:9170)
    at angular.js:14777
    at n.$digest (angular.js:16219)
    at n.$apply (angular.js:16492)
    at g (angular.js:10872)
    at A (angular.js:11070)
    at XMLHttpRequest.w.onload (angular.js:11011)

What am I doing wrong?

Answer 1

It's because you pass an expression to active:

active="activeTabId === tab.id"

It needs something that it can bind to and write back to.

Pass a variable instead:

active="myVariable"

Where myVariable is the index of the active tab.