jQuery UI Accordion not working inside AngularJS view template

I am working on an angular.js application. I need to use accordion in one of its views. Following is what my viewProvider looks like

dash.config(['$routeProvider', function($routeProvider){
$routeProvider.
 when('/users', {
    templateUrl:'templates/users.html',
    controller:'UserController'
 }).
 when('/history', {
    templateUrl:'templates/history.html',
    controller:'HistoryController'
 }).
 otherwise({
    redirectTo:'/users'
 });
}]);

In the history.html template I have a jQuery Accordion UI which looks like following:

<div class="box-group" id="accordion">
<div class="panel box box-warning">
                                <div class="box-header">
                                    <h4 class="box-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
                                        Heading2
                                    </a>
                                </h4> <!-- .box-title -->
                            </div> <!-- box-header -->
                            <div id="collapse4" class="panel-collapse collapse">
                                <div class="box-body">
                                    Content2
                                </div> <!-- box-body -->
                            </div> <!-- /.panel-collapse -->
                        </div><!-- /.box -->
<div class="panel box box-warning">
                                <div class="box-header">
                                    <h4 class="box-title">
                                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
                                        Heading3
                                    </a>
                                </h4> <!-- .box-title -->
                            </div> <!-- box-header -->
                            <div id="collapse4" class="panel-collapse collapse">
                                <div class="box-body">
                                    Content3
                                </div> <!-- box-body -->
                            </div> <!-- /.panel-collapse -->
                        </div><!-- /.box -->
</div><!-- /.box-group -->

What happens now that when I click my accordion headings the link pointing to collapseX goes to default route /users and not expanding the accordion.

My js files are included in my index.html which has the ng-view directive.

I have tried ang-accordion.js which also not working inside view directed by templateurl.

angular.module('TabsApp', [])

.controller('TabsCtrl', ['$scope', function ($scope) {

$scope.tabs = [{
    title: 'Admin',
    templateUrl: 'Views/Admin.html'
},
{
    title: 'Data',
    templateUrl: 'two.tpl.html'
},
{
    title: 'Chart',
    templateUrl: 'three.tpl.html'
}
,
{
    title: 'DashBoard',
    templateUrl: 'four.tpl.html'
}

];

$scope.currentTab = 'Views/Admin.html';

$scope.onClickTab = function (tab) {

    if (tab.title == 'Admin') {
        $scope.currentTab = tab.templateUrl;
    }
    else {
        $scope.currentTab = tab.templateUrl;
    }
}

$scope.isActiveTab = function (tabUrl) {
    return tabUrl == $scope.currentTab;
}

}]);

HTML

  <div ng-app="TabsApp">

                    <div id="tabs" ng-controller="TabsCtrl">
                        <ul>
                            <li ng-repeat="tab in tabs"
                                ng-class="{active:isActiveTab(tab.templateUrl)}"
                                ng-click="onClickTab(tab)">{{tab.title}}

                            </li>
                        </ul>
                        <div id="mainView">
                            <div ng-include="currentTab"></div>
                        </div>

                </div>


             <script type="text/ng-template" id="Admin.html"> 
             </script>

  <script type="text/ng-template" id="two.tpl.html">

    <div id="viewTwo">
        <h1>View Two</h1>
    </div>

  </script>

 <script type="text/ng-template" id="three.tpl.html">
    <div id="viewThree">
        <h1>View Three</h1>
    </div>
</script>


<script type="text/ng-template" id="four.tpl.html">
    <div id="viewFour">
        <h1>VIEW TEST</h1>

    </div>
</script>


                </div>