angular 1.5 component initialize on two way binding change
<p>i'm trying to reinitialize a component when a two way bound object changes.</p>

<pre><code>  &lt;ul class="nav nav-pills nav-stacked"&gt;
    &lt;li ng-repeat="tab in tabs"
        ng-class="{'active': activeTab.id === tab.id }"&gt;
        &lt;a href="" ng-click="setActive(tab)"&gt; {{ tab.title }}&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;

  &lt;my-component tab="activeTab"&gt;&lt;/my-component&gt;


app.component('myComponent', {
  template: '&lt;div&gt;{{ $ctrl.tab.title }}&lt;/div&gt;',
  bindings: {
    tab: '='
  },
  controller: function() {
    var init = function() {
      console.log('hi')
    }
    init()
  }
})
</code></pre>

<p>How can I make sure <code>init()</code> is called every time activeTab.id changes? </p>

<p>I looked into <a href="https://docs.angularjs.org/api/ng/service/$compile#life-cycle-hooks" rel="nofollow">lifecycle hooks</a> and that doesn't appear to be the answer. </p>

<p><a href="https://plnkr.co/edit/QjHCxa0usskvfW7582Qr?p=preview" rel="nofollow">here</a> is a plunkr with code</p>