Angularjs Routing behaves strange when using tabset directive from ui-bootstrap

Question

I've been trying to solve a strange behaviour. Whenever I use the tabset directive from ui-bootstrap in one of my ui-router templates, I am unable to navigate away from that particular state. The error that I get 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

For the first time it works fine routing behaves normal but once a page with tabset is loaded, the above mentioned abnormal behavior of routing starts

Here is my fiddle...........

you can find two links in the fiddle demo

1 -> Tab Absent [A simple page with no Tab] 2 -> Tab Present [A page with ui-bootstrap tab]

if you first select the Tab Absent Page it will work properly but once you visit Tab Present Page then whenever you click on Tab Absent page the routing do not happen[ie tabs do not dissappear].

And if you visit Tab Present Page first and then select Tab Absent page u will get error in console

Answer 1

I'm not much for jsFiddle anymore -- so I took your code and put it in a plunker and updated the versions of angular and angular-ui-bootstrap and voila... (it works):

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