begin free room controller

app/app.js

     'ui.router',
     'LocalStorageModule',
     'ngMaterial',
+    'ngMaterialDatePicker',
     'appSdk'
 ]);
 
             controller:'HomeController'
         });
 
+        $stateProvider.state('freeroom',{
+            url:'/freeroom',
+            templateUrl:'views/freeroom.html',
+            controller:'FreeRoomController'
+        });
+
         $urlRouterProvider.otherwise('/');
 
     }])

app/controllers/freeroom.controller.js

+/**
+ * Created by robin on 11/1/15.
+ */
+
+angular.module('app')
+    .controller('FreeRoomController', ['$scope', '$mdDialog', 'DataShareBusiness',
+        function($scope, $mdDialog, DataShareBusiness) {
+
+            $scope.dateFormat = DataShareBusiness.DateFormat;
+            $scope.timeFormat = DataShareBusiness.TimeFormat;
+            $scope.Search = {
+                Begin: new Date(),
+                End: new Date()
+            };
+
+            $scope.close = function()
+            {
+                $mdDialog.cancel();
+            };
+        }]);

app/controllers/home.controller.js

 
             $scope.DataShareBusiness = DataShareBusiness;
             $scope.dateFormat = DataShareBusiness.DateFormat;
-            $scope.hourFormat = DataShareBusiness.HourFormat;
+            $scope.timeFormat = DataShareBusiness.TimeFormat;
             $scope.courses = null;
             $scope.weekId = {
                 id: null,

app/controllers/modals/course.controller.js

  */
 
 angular.module('app')
-    .controller('CourseController', ['$scope', '$mdDialog', 'course',
-        function($scope, $mdDialog, course) {
+    .controller('CourseController', ['$scope', '$mdDialog', 'course', 'DataShareBusiness',
+        function($scope, $mdDialog, course, DataShareBusiness) {
 
             $scope.course = course;
-            $scope.dateFormat = "dd MMM yyyy";
-            $scope.hourFormat = "HH'h'mm";
+            $scope.dateFormat = DataShareBusiness.dateFormat;
+            $scope.timeFormat = DataShareBusiness.TimeFormat;
 
             $scope.close = function()
             {

app/controllers/modals/freeroom.controller.js

-/**
- * Created by robin on 11/1/15.
- */
-
-angular.module('app')
-    .controller('FreeRoomController', ['$scope', '$mdDialog',
-        function($scope, $mdDialog) {
-
-            $scope.course = course;
-            $scope.dateFormat = DataShareBusiness.DateFormat;
-            $scope.hourFormat = DataShareBusiness.HourFormat;
-
-            $scope.close = function()
-            {
-                $mdDialog.cancel();
-            };
-        }]);

app/controllers/sidebar.controller.js

  */
 
 angular.module('app')
-    .controller('SideBarController', ['$scope', '$state', 'DataShareBusiness',
-        function($scope, $state, DataShareBusiness) {
+    .controller('SideBarController', ['$scope', '$state', 'DataShareBusiness', '$mdDialog',
+        function($scope, $state, DataShareBusiness, $mdDialog) {
 
             $scope.DataShareBusiness = DataShareBusiness;
 
                 }
             };
 
-            $scope.findFreeRoom = function()
+            $scope.isInState = function(state)
             {
-                $mdDialog.show({
-                    controller: 'FreeRoomController',
-                    templateUrl: 'views/modals/freeroom.html',
-                    parent: angular.element(document.body),
-                    targetEvent: null,
-                    clickOutsideToClose: true,
-                    fullscreen: false
-                });
+                return $state.current.name == state;
             };
         }]);

app/controllers/toolbar.controller.js

                 {
                     $mdSidenav('left').toggle();
                 };
+
+                $scope.isInState = function(state)
+                {
+                        return $state.current.name == state;
+                };
         }]);

app/index.html

     <!-- build:css css/globals.css -->
     <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" href="../bower_components/angular-material/angular-material.min.css">
+    <link rel="stylesheet" href="../bower_components/angular-material-datetimepicker/css/material-datetimepicker.min.css">
     <link rel="stylesheet" href="css/lubusy.css">
     <!-- endbuild -->
 
     <script src="../bower_components/angular-aria/angular-aria.min.js"></script>
     <script src="../bower_components/angular-animate/angular-animate.min.js"></script>
     <script src="../bower_components/angular-material/angular-material.min.js"></script>
+    <script src="../bower_components/moment/min/moment.min.js"></script>
+    <script src="../bower_components/angular-material-datetimepicker/js/angular-material-datetimepicker.min.js"></script>
 
     <!-- scripts -->
     <script src="app.js"></script>
     <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 -->
+    <script src="controllers/modals/course.controller.js"></script>
+    <script src="controllers/freeroom.controller.js"></script>
 
     <!-- SDK -->
     <script src="../sdk/sdk.js"></script>

app/views/freeroom.html

+<div layout="column" layout-fill layout-align="top center">
+    <input class="form-control" mdc-datetime-picker="" date="true" time="true" type="text" id="datetime"
+           placeholder="Begin date" min-date="date" ng-model="Search.Begin" class=" md-input">
+</div>

app/views/home.html

         <div class="col-xs-1 hour-column">
             <div class="day-column-hours">
                 <div class="day-column-hour" ng-hide="$first" ng-repeat="hour in hours" ng-style="{'top': ($index / hours.length * 100) + '%'}">
-                    {{hour | date : hourFormat}} -
+                    {{hour | date : timeFormat}} -
                 </div>
             </div>
         </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>
+                        <span class="day-column-course-hour">{{course.BeginDate | date : timeFormat}} - {{course.EndDate | date : timeFormat}}</span>
                     </div>
                 </div>
             </div>
+
+
         </div>
     </div>
 

app/views/modals/course.html

                 <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>
+                <span class="day-column-course-hour">{{course.BeginDate | date : timeFormat}} - {{course.EndDate | date : timeFormat}}</span>
             </div>
         </md-dialog-content>
         <md-dialog-actions layout="row">

app/views/sidebar.html

                 </li>
             </ul>
 
-            <!--<span>Need a room ?</span>
-            <md-button class="md-primary md-group-button col-xs-12" ng-click="findFreeRoom()">
-                Find a free room!
-            </md-button>-->
+            <div ng-hide="isInState('freeroom')">
+                <span>Need a room ?</span>
+                <md-button class="md-primary md-group-button col-xs-12" ui-sref="freeroom">
+                    Find a free room!
+                </md-button>
+            </div>
         </div>
     </md-content>
 </md-sidenav>

app/views/toolbar.html

         <md-button class="md-icon-button" aria-label="Groupes" ng-click="toggleSideBar()" hide-gt-md>
             <md-icon md-svg-icon="img/menu.svg"></md-icon>
         </md-button>
-        <h2>
+        <h2 ng-show="isInState('home')">
             <a ng-href="{{DataShareBusiness.getGroupUrl(null)}}">{{ DataShareBusiness.SearchSeparator }} </a>
             <a ng-href="{{DataShareBusiness.getGroupUrl(group)}}" ng-repeat="group in DataShareBusiness.CurrentGroups">
                 {{ group.Name }}{{ $last ? "" : " " + DataShareBusiness.SearchSeparator + " " }}
             </a>
         </h2>
+        <h2 ng-show="isInState('freeroom')">
+            Find a free room
+        </h2>
         <span flex></span>
-        <!--<md-button class="md-icon-button" aria-label="Favorite">
-            <md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
-        </md-button>
-        <md-button class="md-icon-button" aria-label="More">
-            <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
-        </md-button>-->
     </div>
 </md-toolbar>

bower.json

   "dependencies": {
     "angular": "1.5.x",
     "jquery": "2.1.x",
+    "angular-bootstrap": "1.1.x",
     "angular-ui-router": "0.2.x",
     "bootstrap": "3.3.x",
     "less": "1.7.x",
     "angular-local-storage": "0.2.3",
     "angular-material": "^1.0.6",
-    "angular-bootstrap": "^1.2.1"
+    "angular-material-datetimepicker": "^1.3.1",
+    "moment": "^2.11.2"
+  },
+  "resolutions": {
+    "angular-material": "^1.0.6"
   }
 }

sdk/Business/DataShareBusiness.js

 (function()
 {
     angular.module('appSdk')
-        .factory('DataShareBusiness', ['$location', function ($location) {
+        .factory('DataShareBusiness', ['$location', '$state', function ($location, $state) {
 
             var data = {
                 Groups: null,
 
                 DateFormat: "dd MMM yyyy",
 
-                HourFormat: "HH'h'mm",
+                TimeFormat: "HH'h'mm",
 
                 setCurrentGroup: function(group)
                 {
                 getGroupUrl: function(group)
                 {
                     var search = data.getSearchString(group);
-                    return "#" + $location.path() + $location.hash() + "?" + search;
+                    return $state.href('home') + $location.hash() + "?" + search;
                 },
 
                 setFromSearchString: function(string)