Angular drag and drop & jasmine

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"/>

<!--
<div class="row text-center" ng-controller="MainCtrl">
    <h1>{{blap}}</h1>
    <ul class="draglist">
        <li ng-repeat="obj in draggableObjects" ng-drop="true" ng-drop-success="onDropComplete($index, $data,$event)">
            <div ng-drag="true" ng-drag-data="obj" ng-class="obj.name">
                {{obj.name}}
            </div>
        </li>
    </ul>
</div>
-->
<div ng-controller="SimpleDemoController" class="simpleDemo">
    <h1>SimpleDemoController</h1>
    
        <div class="col-md-8">
        <div class="row">
            <div ng-repeat="(listName, list) in models.lists" class="col-md-6">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">List {{listName}}</h3>
                    </div>
                    <div class="panel-body">
                        <!-- The dnd-list directive allows to drop elements into it.
                             The dropped data will be added to the referenced list -->
                        <ul dnd-list="list">
                            <!-- The dnd-draggable directive makes an element draggable and will
                                 transfer the object that was assigned to it. If an element was
                                 dragged away, you have to remove it from the original list
                                 yourself...

CSS

.draglist {
    list-style-type: none;
}
.draglist li { display:inline-block;}
.draglist li div {
    width: 200px;
    height: 200px;
    line-height: 200px;
    border: solid 1px #e9e9e9;
    display: inline-block;
}

[ng-drag].dragging {
    background-color: rgba(23, 23, 23, .5);
}

[ng-drag].dragging {
    background-color: rgba(23, 23, 23, .5);
}


/**
 * For the correct positioning of the placeholder element, the dnd-list and
 * it's children must have position: relative
 */
.simpleDemo ul[dnd-list],
.simpleDemo ul[dnd-list] > li {
	position: relative;
}

/**
 * The dnd-list should always have a min-height,
 * otherwise you can't drop to it once it's empty
 */
.simpleDemo ul[dnd-list] {
    min-height: 42px;
    padding-left: 0px;
}

/**
 * The dndDraggingSource class will be applied to
 * the source element of a drag operation. It makes
 * sense to hide it to give the user the feeling
 * that he's actually moving it.
 */
.simpleDemo ul[dnd-list] .dndDraggingSource {
    display: none;
}

/**
 * An element with .dndPlaceholder class will be
 * added to the dnd-list while the user is dragging
 * over it.
 */
.simpleDemo ul[dnd-list] .dndPlaceholder {
    display: block;
    background-color: #ddd;
    min-height: 42px;
}

/**
 * The dnd-lists's child elements currently MUST have
 * position: relative. Otherwise we can not determine
 * whether the mouse pointer is in the upper or lower
 * half of the element we are dragging over. In other
 * browsers we can use event.offsetY for this.
 */
.simpleDemo ul[dnd-list] li {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
}

/**
 * Show selected elements in green
 */
.simpleDemo ul[dnd-list] li.selected {
    background-color: #dff0d8;
    color: #3c763d;
}




/**
 * For the correct positioning of the placeholder element, the dnd-list and
 * it's children must have...

JavaScript

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

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

//angular.module('ExampleApp', ['ngDraggable']).
/*
app.controller('MainCtrl', function ($scope) {
    $scope.blap = "Flap"
    $scope.draggableObjects = [
        {name: 'one'},
        {name: 'two'},
        {name: 'three'}
    ];
    $scope.onDropComplete = function (index, obj, evt) {
        var otherObj = $scope.draggableObjects[index];
        var otherIndex = $scope.draggableObjects.indexOf(obj);
        $scope.draggableObjects[index] = obj;
        $scope.draggableObjects[otherIndex] = otherObj;
    }
});
*/

app.controller("SimpleDemoController", function($scope) {

    $scope.models = {
        selected: null,
        lists: {"A": [], "B": []}
    };

    // Generate initial model
    for (var i = 1; i <= 3; ++i) {
        $scope.models.lists.A.push({label: "Item A" + i});
        $scope.models.lists.B.push({label: "Item B" + i});
    }

    // Model to JSON for demo purpose
    $scope.$watch('models.lists.A', function(model) {
    alert("Hello");
        $scope.modelAsJson = angular.toJson(model, true);
    }, true);

});




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

    it("Application Starts", function () {
        //
        expect(1).toBe(1);
    });

});

describe('Material Theme', function(){

    it("Should use Google Material", function(){

        //Check that ngMaterial is included in angular's 'requires'
        var hasMaterial = app.requires.indexOf('ngMaterial') >= 0;
        
        expect(hasMaterial).toBe(true);
    });

});