UI-Bootstrap accordion doesn't works in SharePoint

Question

I'm trying to do a simple UI-Bootstrap accordion in a SharePoint 2013 page.

This is the markup page:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyPage.ascx.cs" Inherits="MyProject.CONTROLTEMPLATES.MyProject.MyPage" %>

<link href="../../../_layouts/15/MyProject/Styles/StyleSheet.css" rel="stylesheet" />
<link href="../../../_layouts/15/MyProject/Styles/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="../../../_layouts/15/MyProject/Styles/angularjs/angular-flash.css" rel="stylesheet" />
<link href="../../../_layouts/15/MyProject/Styles/angularjs/ngDialog.css" rel="stylesheet" />

<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-animate.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-route.min.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/ng-table.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-sh-checkbox.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-flash.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angular-mask.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/ngDialog.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/bootstrap/ui-bootstrap-tpls-0.14.2.min.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/angularCommonModule.js" Localizable="False" OnDemand="False" />
<SharePoint:ScriptLink runat="server" Name="~sitecollection/_layouts/15/MyProject/Scripts/angularjs/MyPALRequests.js" Localizable="False" OnDemand="False" />

<div ng-app="myApp">  
    <div id="main" ng-controller="myController">

        <uib-accordion close-others="true">
            <uib-accordion-group heading="Static Header 1, initially expanded" is-open="true">
                This content 1 is straight in the template.
            </uib-accordion-group>
            <uib-accordion-group heading="Static Header 2">
                This content 2 is straight in the template.
            </uib-accordion-group>
        </uib-accordion>
    </div>
</div>

I also included ui.bootstrap module:

var myApp = angular.module('myApp', [ '...', '...', '...', 'ui.bootstrap']);

The result is only a text like This content 1 is straight in the template. This content 2 is straight in the template. without accordion.

I made this plunker that works perfectly so I found that if I delete the ui-bootstrap-tpls-0.14.2.js script I get same behavior of my SharePoint page. The ui-bootstrap-tpls-0.14.2.js script has some problem to load? I don't get any error in developer tools console.

In another view of this page I also use UI-Bootstrap radio button and it works.

Thank you

Answer 1

I found the issue: AngularJS and AngularAnimateJS have different version. Get both at the same version and it works.