AngularJS bootstrap accordion causing AngularJS to load more than once

Question

I've had this problem for a few days now and I can't get to the bottom of it. I'm using Gulp to build my project. In the gulpfile.js I have the following:

For my JS

gulp.task('scripts', function () {
    gulp.src([
        DIRSOURCE + 'lib/angular/angular.min.js',
        DIRSOURCE + 'lib/jquery/jquery.min.js',
        DIRSOURCE + 'lib/angular-ui-router/release/angular-ui-router.min.js',
        DIRSOURCE + 'lib/angular-animate/angular-animate.min.js',
        DIRSOURCE + 'lib/angular-bootstrap/ui-bootstrap.min.js',
        DIRSOURCE + 'lib/angular-sanitize/angular-sanitize.min.js',
        DIRSOURCE + 'lib/angular-translate/angular-translate.min.js',
        DIRSOURCE + 'lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js',
        DIRSOURCE + 'lib/angular-ui-select/dist/select.min.js',
        DIRSOURCE + 'lib/angular-tour/dist/angular-tour-tpls.min.js'
    ])
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest(DIRDEST + 'lib/'));

    gulp.src([DIRSOURCE + 'modules/module.js', DIRSOURCE + 'modules/**/*.js'])
        .pipe(concat('app.js'))
        .pipe(gulp.dest(DIRDEST + 'modules'));
});

For my CSS

gulp.task('less', function () {
    gulp.src([DIRSOURCE + 'assets/less/sce.less'])
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(rename("style.css"))
        .pipe(gulp.dest(DIRDEST + 'assets/css'));
});

All of the above seems to be working fine as the application loads with no errors. The problem arises when I try to add an accordion from the bootstrap ui library: https://angular-ui.github.io/bootstrap/

I have the following template file - sidebar.html. I want to add the accordion here. I have the following markup:

<div class='col-md-12 other'> <uib-accordion close-others="oneAtATime"> <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> This content is straight in the template. </uib-accordion-group> <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups"> {{group.content}} </uib-accordion-group> <uib-accordion-group heading="Dynamic Body Content"> <p>The body of the uib-accordion group grows to fit the contents</p> <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button> <div ng-repeat="item in items">{{item}}</div> </uib-accordion-group> <uib-accordion-group heading="Delete account" panel-class="panel-danger"> <p>Please, to delete your account, click the button below</p> <button class="btn btn-danger">Delete</button> </uib-accordion-group> <uib-accordion-group is-open="status.open"> <uib-accordion-heading> I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> </uib-accordion-heading> This is just some content to illustrate fancy headings. </uib-accordion-group> </uib-accordion> </div>

The route that assigns the controller to the view is here:

 var main = {
        name: "MainPage",
        url: "/",
        title: '`Homepage',
        views: {
            "mainContent": {
                templateUrl: "modules/main/template/home.html",
                controller: "MainPageController"
            },
            "sidebar":{
                templateUrl: "modules/main/template/sidebar.html",
                controller: "SidebarController"
            }
        }
    };`

This is the controller associated with sidebar.html

application.controller('SidebarController', ['$scope', '$rootScope', '$http', '$state', function ($scope, $rootScope, $http, $state, $translate) {
    console.log('Sidebar controller');
    $scope.oneAtATime = true;
    $scope.groups = [
        {
            title: 'Dynamic Group Header - 1',
            content: 'Dynamic Group Body - 1'
    },
        {
            title: 'Dynamic Group Header - 2',
            content: 'Dynamic Group Body - 2'
    }
  ];

    $scope.items = ['Item 1', 'Item 2', 'Item 3'];

    $scope.addItem = function () {
        var newItemNo = $scope.items.length + 1;
        $scope.items.push('Item ' + newItemNo);
    };

    $scope.status = {
        isFirstOpen: true,
        isFirstDisabled: false
    };


}]);

My application is declared along with the libraries required in application.js like this:

var application = angular.module('sceDemo', ['ui.bootstrap', 'ngAnimate', 'ui.router', 'ngSanitize', 'pascalprecht.translate', 'ui.select', 'angular-tour']);

However when I run

gulp clean && gulp && gulp server

and load up my app in browser the area that should show the accordion seems to have loaded the index.html file again and when I view my console I see this error message:

warning: tried to load angular more than once

I cannot figure out what the problem is, all I've established is that it is being caused by trying to add the accordion as when I remove it the problem is resolved. any help is much appreciated.

I hope I've provided enough information. If not please request and I will supply.

Thanks!