Angular Sortable - not working

HTML

<link rel="stylesheet" type="text/css" href="/css/result-light.css"/>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.2.1/jasmine.min.css"/>
<!-- 
    EOF CSS
-->

<div id="appWrap" ng-controller="appCtrl">
    <md-toolbar layout="row">
        <h1>{{title}}</h1>
    </md-toolbar>
    <md-content>
        
    </md-content>
        <h3>List</h3>
        <ul class="sortableList" ui-sortable="listOptions" ng-model="lists[0]">
            <li class="li" ng-repeat="item in lists[0].items">{{item.title}}</li>
        </ul>
        <ul class="sortableList" ui-sortable="listOptions" ng-model="lists[1]">
            <li class="li" ng-repeat="item in lists[1].items">{{item.title}}</li>
        </ul>
    <hr/>
<ul ui-sortable="listOptions" ng-model="lists.items[0]">
  <li ng-repeat="item in lists.items[0]">{{ item }}</li>
</ul>
</div>

<!-- 
    SOF JAVASCRIPT
-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.6/angular.js'></script>

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-aria.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.3/angular-material.min.js"></script>

<script type='text/javascript'...

CSS

.item, .placeholder {
    padding: 2px;
    width: 50px;
    height: 20px;
    border: 1px solid #333;
    background: #EEE;
}

JavaScript

var app = angular.module('app', ['ngMaterial', 'ui.sortable']);

//Set the material theme...
//try on of the Palettes from
//https://material.angularjs.org/#/Theming/01_introduction
app.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .dark().primaryPalette('grey',{})
});

app.controller('appCtrl', ['$scope', '$mdSidenav', '$mdDialog', function($scope, $mdSidenav, $mdDialog){
    $scope.listOptions = {
            connectWith: '.sortableList'
        }
    var tmpList = [];
    $scope.title = 'App Title';
    $scope.lists = [{
        items: [{
            title: 'Item 1'
        },{
            title: 'Item 2'
        },{
            title: 'Item 3'
        }]
    }, {
        items: [{
            title: 'Item a1'
        },{
            title: 'Item a2'
        },{
            title: 'Item a3'
        }]
    }]
}]);

angular.element(document).ready(function() {
    angular.bootstrap(document, ['app']);
});

/* 
 * Specs
 */
describe("app", function() {

    it("ExtractNumbers method should extract numbers from a string", function () {
        expect("57").toBe("57");
    });

});

describe("AppCtrl", function(){
    var scope,
    controller;
    
    beforeEach(function () {
        module('app');
    });
    
    beforeEach(inject(function(_$controller_){
        $controller = _$controller_;
    }));
    
    
});