project.patch

diff --git a/app/index.html b/app/index.html
index c63ec15..673e360 100644
--- a/app/index.html
+++ b/app/index.html
@@ -14,6 +14,7 @@
     <!-- bower:css -->
     <link rel="stylesheet" href="bower_components/jquery-mobile/css/themes/default/jquery.mobile.css" />
     <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
+    <link rel="stylesheet" href="bower_components/isteven-angular-multiselect/angular-multi-select.css" />
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:css(.tmp) styles/main.css -->
@@ -131,6 +132,7 @@
     <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js"></script>
     <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js"></script>
     <script src="bower_components/angular-wizard/dist/angular-wizard.js"></script>
+    <script src="bower_components/isteven-angular-multiselect/angular-multi-select.js"></script>
     <script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
     <script src="bower_components/angular-jwt/dist/angular-jwt.js"></script>
     <!-- endbower -->
@@ -158,6 +160,7 @@
         <script src="scripts/controllers/start.js"></script>
 
         <script src="scripts/controllers/school.js"></script>
+        <script src="scripts/controllers/classroom.js"></script>
         <!-- endbuild -->
 
     <script src="scripts/sifma.jquery.js"></script>
diff --git a/app/scripts/app.js b/app/scripts/app.js
index c8b94ae..9871a78 100644
--- a/app/scripts/app.js
+++ b/app/scripts/app.js
@@ -20,6 +20,7 @@ angular
     'ngSanitize',
     'ngTouch',
     'ui.bootstrap',
+    'multi-select',
     'angularMoment',
     'angular-jwt',
     'mgo-angular-wizard',
diff --git a/app/scripts/controllers/classroom.js b/app/scripts/controllers/classroom.js
new file mode 100644
index 0000000..7ee1528
--- /dev/null
+++ b/app/scripts/controllers/classroom.js
@@ -0,0 +1,37 @@
+
+'use strict';
+
+/**
+ * @ngdoc function
+ * @name sifmaUiApp.controller:SchoolCtrl
+ * @description
+ * # SchoolCtrl
+ * Controller of the sifmaUiApp
+ */
+angular.module('sifmaUiApp')
+  .controller('ClassroomCtrl', ['Subjects', 'ClassTypes', 'StudentTypes', 'NationalOrganizations', '$scope', function (Subjects, ClassTypes, StudentTypes, NationalOrganizations, $scope) {
+
+    $scope.SubjAreaList = [];
+    $scope.ClassTypes = [];
+    $scope.StudentTypes = [];
+    $scope.NationalOrganizations = [];
+
+    Subjects.getList().then(function (data) {
+      $scope.SubjAreaList = data;
+    });
+
+    ClassTypes.getList().then(function (data) {
+      $scope.ClassTypes = data;
+    });
+
+    StudentTypes.getList().then(function (data) {
+      $scope.StudentTypes = data;
+    });
+
+    NationalOrganizations.getList().then(function (data) {
+      $scope.NationalOrganizations = data;
+    });
+
+  }]);
+
+
diff --git a/app/views/partials/wizards/register/yourclasses.html b/app/views/partials/wizards/register/yourclasses.html
index 7a30b56..69cca72 100644
--- a/app/views/partials/wizards/register/yourclasses.html
+++ b/app/views/partials/wizards/register/yourclasses.html
@@ -3,6 +3,43 @@
     <h1 ng-bind="getTitle($index)"></h1>
 
     <!-- TODO: FORM HERE -->
+    <div ng-controller="ClassroomCtrl">
+        <div multi-select
+             input-model="SubjAreaList"
+             button-label="description"
+             item-label="description"
+             selection-mode="multiple"
+             helper-elements=""
+             tick-property="selected">
+        </div>
+
+        <div multi-select
+             input-model="NationalOrganizations"
+             button-label="description"
+             item-label="description"
+             selection-mode="multiple"
+             helper-elements=""
+             tick-property="selected">
+        </div>
+
+        <div multi-select
+             input-model="ClassTypes"
+             button-label="description"
+             item-label="description"
+             selection-mode="multiple"
+             helper-elements=""
+             tick-property="selected">
+        </div>
+
+        <div multi-select
+             input-model="StudentTypes"
+             button-label="description"
+             item-label="description"
+             selection-mode="multiple"
+             helper-elements=""
+             tick-property="selected">
+        </div>
+    </div>
 
     <input type="submit" wz-next value="{{getBtnText($index)}}" class="btn btn-default btn-progress" ng-click="storeProgress($index)" />