recomend roles and still show form when complete

services/web/app/views/project/list.jade

@@ -101,21 +101,21 @@ block content
 						ul#projectList
 							mixin projectList(projects)
 
-					.span3#userProfileInformation()
+					.span3#userProfileInformation(ng-cloak)
 						div(ng-controller="UpdateForm").userProfileInformationArea
 							div(ng-hide="hidePersonalInfoSection").alert.alert-info
 
-								div(ng-show="percentComplete >= 100")
-									h4 100% complete, well done!
-								div(ng-hide="percentComplete >= 100")
-									h4 Your account is 
-										strong {{percentComplete}}% 
-										| complete
+									div(ng-show="percentComplete >= 100")
+										h4 100% complete, well done!
+									div(ng-hide="percentComplete >= 100")
+										h4 Your account is 
+											strong {{percentComplete}}% 
+											| complete
 
 									.progress
 										.bar.bar-success(ng-style="{'width' : (percentComplete+'%')}")
 
-									button#completeUserProfileInformation.btn.btn-primary(ng-hide="formVisable", ng-click="formVisable = true") Complete now
+									button#completeUserProfileInformation.btn.btn-primary(ng-hide="formVisable", ng-click="showForm()") Complete now
 
 									div(ng-show="formVisable")
 										form(enctype='multipart/form-data', method='post')
@@ -124,9 +124,11 @@ block content
 											.input
 												input(type='text', name='last_name', ng-model="userInfoForm.last_name", ng-blur="sendUpdate()", placeholder='Last Name')
 											.input#institution_auto_complete
-												autocomplete(ng-model="userInfoForm.institution", data="institutions", on-type="updateInstitutionsList", attr-placeholder="Institution")
+												autocomplete(ng-model="userInfoForm.institution", data="institutions", ng-blur="sendUpdate()", on-type="updateInstitutionsList", attr-placeholder="Institution")
 											.input
-												input(type='text', name='role',  ng-model="userInfoForm.role", placeholder='Role', ng-blur="sendUpdate()")
+												input(type='text', name='role',  ng-model="userInfoForm.role", placeholder='Role', ng-blur="sendUpdate()", list="_roles")
+												datalist#_roles
+													option(ng-repeat='role in roles') {{role}}
 					.span3
 						.tag-list
 							h2 Tags

services/web/public/coffee/UserDetailsUpdater.coffee

@@ -7,10 +7,12 @@ define ["libs/algolia", "libs/angular", "libs/angular-autocomplete/angular-autoc
 
 	app.controller "UpdateForm", ($scope, $http, Institutions)->
 		$scope.institutions = []
+		$scope.formVisable = false
 		$scope.hidePersonalInfoSection = true
+		$scope.roles = ["Student", "Post-graduate student", "Post-doctoral researcher", "Lecturer", "Proffessor"]
 
 		$http.get("/user/personal_info").success (data)->
-			$scope.userInfoForm = 
+			$scope.userInfoForm =
 				first_name: data.first_name
 				last_name: data.last_name
 				role: 	   data.role
@@ -21,10 +23,12 @@ define ["libs/algolia", "libs/angular", "libs/angular-autocomplete/angular-autoc
 				$scope.percentComplete = getPercentComplete()
 				$scope.hidePersonalInfoSection = false
 
+		$scope.showForm = ->
+			$scope.formVisable = true
+
 		$scope.sendUpdate = ->
 			request = $http.post "/user/personal_info", $scope.userInfoForm
 			request.success (data, status)->
-				console.log "the post worked"
 			request.error (data, status)->
 				console.log "the request failed"
 			$scope.percentComplete = getPercentComplete()
@@ -37,5 +41,7 @@ define ["libs/algolia", "libs/angular", "libs/angular-autocomplete/angular-autoc
 			Institutions.search $scope.userInfoForm.institution, (err, response)->
 				$scope.institutions = _.pluck response.hits, "name"
 
+
+
 	angular.bootstrap(document.getElementById("userProfileInformation"), ['userProfileInformationApp'])
 

services/web/public/stylesheets/less/list.less

@@ -297,7 +297,7 @@ a.archived-projects {
 	}
 
 	.autocomplete li.active{
-	  background-color: #BDE1F6;
+	  background-color: #b5d4fd;
 	}
 
 	.autocomplete .highlight {

services/web/public/stylesheets/less/style.less

@@ -80,3 +80,7 @@ input.large{
 	}
 }
 
+
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+  display: none !important;
+}