Simple nested accordion using Angular ng-repeat

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>


  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>

  <link href="style.css" rel="stylesheet">

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div ng-controller="MainCtrl">
    <label class="checkbox">
      <input type="checkbox" ng-model="oneAtATime">Open only one at a time
    </label>
    <div ng-controller="PartsCtrl">

      <h2>Nested Accordion Test</h2>
      <accordion close-others="$parent.oneAtATime">
        <accordion-group ng-repeat="part in parts">
          <accordion-heading>{{part.title}}</accordion-heading>
          <a class="btn btn-default" ng-click="movePart(part, -1)">Move Up</a>
          <a class="btn btn-default" ng-click="movePart(part, 1)">Move Down</a>
          {{part.content}}
          <accordion ng-if="part.subParts" close-others="$parent.oneAtATime">
            <accordion-group ng-repeat="subPart in part.subParts">
              <accordion-heading>{{subPart.title}}</accordion-heading>
              <a class="btn btn-default" ng-click="moveSubPart(part, subPart, -1)">Move Up</a>
              <a class="btn btn-default" ng-click="moveSubPart(part, subPart, 1)">Move Down</a>
              {{subPart.content}}
            </accordion-group>

          </accordion>
        </accordion-group>
      </accordion>

      <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
      <script src="example.js"></script>

    </div>
  </div>
</body>

</html>

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

angular.module('ui.bootstrap.demo').controller('MainCtrl', function($scope) {
  $scope.oneAtATime = true;

});

angular.module('ui.bootstrap.demo').controller('PartsCtrl', function($scope) {

  $scope.parts = [{
    title: 'Part - 1',
    content: 'Body - 1',
    subParts: []
  }, {
    title: 'Part - 2',
    content: 'Body - 2',
    subParts: []
  }, {
    title: 'Part - 3',
    content: 'Body - 3',
    subParts: []
  }, {
    title: 'Part - 4 with SubParts',
    content: 'Body - 4',
    subParts: [{
      title: 'SubPart - 4.1',
      content: 'Body - 4.1'
    }, {
      title: 'SubPart - 4.2',
      content: 'Body - 4.2'
    }, {
      title: 'SubPart - 4.3',
      content: 'Body - 4.3'
    }, {
      title: 'SubPart - 4.4',
      content: 'Body - 4.4'
    }]
  }];
  
  function move (arr, item, by){
    var oldPos = arr.indexOf(item);
    var newPos = oldPos + by;
    if (newPos < 0){
      newPos = 0;
    }
    if (newPos > arr.length){
      newPos = arr.length;
    }
    
    arr.splice(oldPos, 1); // remove item from oldPos
    arr.splice(newPos, 0, item); // add item at newPos
  }
  
  $scope.movePart = function(part, by){
    move($scope.parts, part, by);
  }
  
  $scope.moveSubPart = function(part, subPart, by){
    move(part.subParts, subPart, by);
  }

});