Angular Material md-select item is not saved at window reload - angularjs

Question

I have a drop down list from where the users are supposed to select the progress for a task. The progress has to be populated at all times, so it cannot be blank. The problem is that I cannot get the controller to get and set the progress information from the service. I admit that I have trouble understanding the logic behind populating the md-select drop down list with the initial progress and getting/setting the new status. I looked at md-select directive on the Angular Material site, but they give clear guidelines about md-on-open and md-on-close, not about initial/default value.
So here is my md-select code in my template:
<md-toolbar style="background-color: #e6e3f4">
<div style="display: flex; flex-direction: row">
<span flex></span>
<md-input-container style="margin: 1px;" ng-controller="SelectOptGroupController">
<md-select ng-model="progress">
<md-option ng-repeat="progress in progresses" value="{{progress}}">{{progress}}</md-option>
</md-select>
</md-input-container>
</div>
</md-toolbar>
It is included in a toolbar, I don't know if that makes any difference or not.
The controller looks like this:
angular
.module('myApp')
.controller('SelectOptGroupController', ['$scope', '$mdDialog', '$stateParams', 'ScorecardStatus', function($scope, $mdDialog, $stateParams, ScorecardStatus) {
$scope.employee.id = $stateParams.employeeid;
$scope.employee.startDate = $stateParams.startdate;
$scope.employee.endDate = $stateParams.enddate;
$scope.progresses = [
"Not started",
"In progress",
"Quality analysis finished",
"Sent for review",
"Completed"
];
$scope.getSelectedProgress = function(progress){
getProgress().then(function(progress){
$scope.progress = progress;
})
}
//console.log($scope.progress);
}])
And here's the service making the calls to and from the Database:
angular
.module('myApp')
.factory('ScorecardStatus', function($http,$rootScope,$q){
var progress;
function setProgress() {
$http({
method: 'POST',
url: 'php/setScorecardProgress.php',
data: {status: selectedStatus, id: employee.id, startdate: employee.startDate, enddate: employee.endDate}
});
}
function getProgress() {
if (!progress)
$http({
method: 'GET',
url: 'php/getScorecardProgress.php'
});
return progress;
}
return {
getProgress: getProgress
}
});
Thanks!

Answer 1

Try to define id for each progress you are using in md-select. As I shown in my example, because you have unique id releated to each progress you can identify any progress by its id. so define your progress model with the id you want to select when the page loads.
<md-toolbar>
<div layout="row" layout-aling="end center">
<span flex></span>
<md-input-container>
<md-select ng-model="progress">
<md-option ng-repeat="progress in progresses" value="{{progress.id}}">{{progress.name}}</md-option>
</md-select>
</md-input-container>
</div>
</md-toolbar>
JS
.controller('TempController', function($scope) {
$scope.progress = 2;
$scope.progresses = [
{
name: "Not started",
id: 0
},
{
name: "In progress",
id: 1
},
{
name: "Quality analysis finished",
id: 2
},
{
name: "Sent for review",
id: 3
},
{
name: "Completed",
id: 4
}
];
});
Here is the wokring example. http://codepen.io/next1/pen/zBNRMe