Angularjs Routing behaves strangely when using the tabset directive from ui-bootstrap

Question

I tried to solve strange behavior. Whenever I use the tabset directive from ui-bootstrap in one of my ui-router templates, I cannot go from this particular state. The error I am getting is:

Error: parent is null Scope.prototype.$destroy@http ://localhost:3000/js/lib/angular/angular.js:7801 bind/<@http://localhost:3000/js/lib/angular/angular.js:681 jQuery.event.dispatch@http ://localhost:3000/js/lib/jquery/jquery-1.9.1.js:3074 jQuery.event.add/ elemData.handle@http ://localhost:3000/js/lib/jquery/jquery-1.9.1.js:2750 jQuery.event.trigger@http ://localhost:3000/js/lib/jquery/jquery-1.9.1.js:2986 .triggerHandler@http ://localhost:3000/js/lib/jquery/jquery-1.9.1.js:3683 removePatch@http ://localhost:3000/js/lib/angular/angular.js:1497 update@http ://localhost:3000/js/lib/angular/angular.js:13876 Scope.prototype.$broadcast@http ://localhost:3000/js/lib/angular/angular.js:8090 updateRoute/<@http://localhost:3000/js/lib/angular/angular.js:7250 qFactory/defer/deferred.promise.then/ wrappedCallback@http ://localhost:3000/js/lib/angular/angular.js:6650 qFactory/defer/deferred.promise.then/ wrappedCallback@http ://localhost:3000/js/lib/angular/angular.js:6650 qFactory/ref/<.then/<@http://localhost:3000/js/lib/angular/angular.js:6687 Scope.prototype.$eval@http ://localhost:3000/js/lib/angular/angular.js:7840 Scope.prototype.$digest@http ://localhost:3000/js/lib/angular/angular.js:7707 Scope.prototype.$apply@http ://localhost:3000/js/lib/angular/angular.js:7926 @http://localhost:3000/js/lib/angular/angular.js:5425 jQuery.event.dispatch@http ://localhost:3000/js/lib/jquery/jquery-1.9.1.js:3074 jQuery.event.add/ elemData.handle@http ://localhost:3000/js/lib/jquery/jquery-1.9.1.js:2750 

The first time it works, fine routing behaves fine, but as soon as the tab page loads, the aforementioned abnormal routing behavior starts

Here is my violin ...........

you can find two links in the script demonstration

1 → Tab Missing [Simple page without tabs] 2 → Tab Present [Tab page ui-bootstrap]

if you first select the Missing Page tab, it will work correctly, but after you go to the Current Page page, and then when you click on the Missing Page tab, routing does not occur. [ie tabs do not disappear].

And if you first go to the "Current Page" tab, and then select the "Missing Page" tab, you will receive an error message in the console

Answer 1

I am no longer for jsFiddle, so I took your code and put it in the plunker and updated the versions of angular and angular -ui-bootstrap and voila ... (it works):

http://plnkr.co/edit/jUSg8GtzwkiixJJPR8MA?p=preview