course dialog

app/controllers/home.controller.js

 
             $scope.showCourse = function(course)
             {
-                $mdDialog.show(
+                $mdDialog.show({
+                    controller: 'CourseController',
+                    templateUrl: 'views/modals/course.html',
+                    parent: angular.element(document.body),
+                    targetEvent: null,
+                    clickOutsideToClose: true,
+                    fullscreen: false,
+                    locals: {
+                        course: course
+                    }
+                });
+                /*$mdDialog.show(
                     $mdDialog.alert()
                         .parent(angular.element(document.querySelector('#popupContainer')))
                         .clickOutsideToClose(true)
                         .content("<a href=''>42</a>")
                         .ariaLabel(course.Name)
                         .ok('Ok')
-                );
+                );*/
             };
 
             $scope.onWeekReceived = function(data)

app/controllers/modals/course.controller.js

+/**
+ * Created by robin on 11/1/15.
+ */
+
+angular.module('app')
+    .controller('CourseController', ['$scope', '$mdDialog', 'course',
+        function($scope, $mdDialog, course) {
+
+            $scope.course = course;
+            $scope.dateFormat = "dd MMM yyyy";
+            $scope.hourFormat = "HH'h'mm";
+
+            $scope.close = function()
+            {
+                $mdDialog.cancel();
+            };
+        }]);

app/index.html

     <script src="controllers/sidebar.controller.js"></script>
     <script src="controllers/toolbar.controller.js"></script>
     <script src="controllers/home.controller.js"></script>
+    <script src="controllers/modals/course.controller.js"></script>
 
     <!-- Modal Controller -->
 

app/less/app.less

   height: 100%;
   min-height: 75px;
 }
+
+
+.course-dialog {
+  min-width: 400px;
+}

app/views/modals/course.html

+<md-dialog aria-label="{{course.Name}}"  ng-cloak class="course-dialog">
+    <form>
+        <md-toolbar>
+            <div class="md-toolbar-tools">
+                <h2>{{course.Name}}</h2>
+                <span flex></span>
+            </div>
+        </md-toolbar>
+        <md-dialog-content>
+            <div class="md-dialog-content">
+                <div ng-repeat="room in course.RoomList">
+                    <span class="day-column-room-name">{{room.Name}}</span>
+                </div>
+                <div ng-repeat="staff in course.StaffList">
+                    <span class="day-column-staff-name">{{staff.Name}}</span>
+                </div>
+                <span class="day-column-course-hour">{{course.BeginDate | date : hourFormat}} - {{course.EndDate | date : hourFormat}}</span>
+            </div>
+        </md-dialog-content>
+        <md-dialog-actions layout="row">
+            <md-button ng-click="close()" style="margin-right:20px;">
+                Close
+            </md-button>
+        </md-dialog-actions>
+    </form>
+</md-dialog>