Bootstrap tabs shown event only fires the first time and not on second or later tab switches
<p>I'm using Bootstrap version 3.3.5 and have a view with two tabs to switch between two panes of content. I setup a listener for when a tab switch to the 'comments' pane happens. It fires the first time. But if I switch back and forth between tabs another time (or many times), the event never fires again. </p>

<pre><code>$('#commentsTab').on('shown.bs.tab', function (e) {
   console.log("do stuff here");
});
</code></pre>

<p>and here's the tab html:</p>

<pre><code>&lt;ul class="nav nav-pills side-tabs" role="tablist"&gt;
   &lt;li class="side-tab hidden-md hidden-lg" ng-class="oneColumn ? 'active' : ''" role="presentation"&gt;
      &lt;a href="" data-target="#topcard" data-toggle="tab" role="tab"&gt;{{title}}&lt;/a&gt;
   &lt;/li&gt;
   &lt;li class="side-tab" ng-class="oneColumn ? '' : 'active'" role="presentation"&gt;
      &lt;a href="" data-target="#notes" data-toggle="tab" role="tab"&gt;&lt;i class="fa fa-clone"&gt;&lt;/i&gt;Notes&lt;/a&gt;
   &lt;/li&gt;
   &lt;li role="presentation" class="side-tab"&gt;
      &lt;a id="commentsTab" class="comments-tab" href="" data-target="#comments" data-toggle="tab" role="tab"&gt;&lt;i class="fa fa-comment-o"&gt;&lt;/i&gt;Feedback&lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Anyone know how to make this work, so that I reliably get the event every time the tab is switched to? </p>