Embedded jqueryui accordian with Angular

Here is my solution.

HTML

        <div ng-controller="startLessonController">
        <div id="accordianLevel">
            <div ng-repeat="level in course.levels" >
              <h2> {{level.number}} - {{level.name}}: {{level.title}}</h2>
                <div >
                    {{level.description}}
                    <div id="accordianLesson">
                        <div ng-repeat="lesson in level.lessons" >
                          <h3> {{lesson.number}} - {{lesson.name}}: {{lesson.title}}</h3>
                             <ul>
                                <li ng-repeat="goal in lesson.goals">{{goal}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Here is the Angular js with embedded data for testing (truncated)

var startLessonApp = angular.module('startLessonApp', []);
startLessonApp.controller('startLessonController', ['$scope', function($scope) {
$scope.course = {
"levels": [
 {
  "number": 1,
  "name": "Level One",
  "title": "Conversation Starters",
  "lessons": [
    {
      "number": 1,
      "name": "Lesson One"
    }
  ]
 }
};

Here is the js to initialize the accordian. Note the override to explicitly identify the accordian header elements (h2 for Level, and h3 for Lesson)

(function () {
  "use strict";
  $(document).ready(function () {
    $( "#accordianLevel" ).accordion({
        header: "h2",
        collapsible: true,
        active:false,
        heightStyle:"content"
    });
            $( "#accordianLesson" ).accordion({
        collapsible: true,
        header: "h3",
        active:false,
        heightStyle:"content"
    });
  });
}());