Ionic Button Click not working - angularjs

Question

My code is pretty simple. Here is an Ionic Screen called Settings which has a thing called Hours Per Week.
<ion-view title="Settings">
<ion-content class="has-header">
<ul class="list">
<label class="item item-input item-label">
<span class="input-label">Hours per week</span>
<input type="text" ng-model="hoursPerWeek" value="37">
</label>
</ul>
<button class="button button-balanced" ng-click="submitClicked()">
Save
</button>
</ion-content>
</ion-view>
This settings screen is using SettingsCtrl, as defined in my app.js file. Here is my controller (Edited):
angular.module('starter.controllers', [])
.controller('SettingsCtrl', function($scope) {
$scope.hoursPerWeek = '37';
$scope.submitClicked = function(){
localStorageService.set('hoursPerWeek',$scope.hoursPerWeek);
console.log("Set Value of hoursPerWeek as : " + $scope.hoursPerWeek);
}
})
As it is evident from above, it uses angular-local-storage module, and I have made sure it is injected into the app as in this declaration :
angular.module('starter', ['ionic', 'starter.controllers', 'LocalStorageModule'])
The problem is submitClicked() does not seem to work. Like if I change the hours per week value to 42 (from 37) , it will seem to work for the current localhost session. When I stop the server and run it again, the value goes back to 37. I dont know whats going wrong here. Any help would be appreciated. I'm facing a new error as described in EDIT 2 below.
EDIT 1 (FIXED):
#icewind, here is the error I am facing
TypeError: localStorage.get is not a function
at new <anonymous> (controllers.js:45)
at Object.instantiate (ionic.bundle.js:18015)
at $controller (ionic.bundle.js:23417)
at Object.self.appendViewElement (ionic.bundle.js:59908)
at Object.render (ionic.bundle.js:57901)
at Object.init (ionic.bundle.js:57821)
at Object.self.render (ionic.bundle.js:59767)
at Object.self.register (ionic.bundle.js:59725)
at updateView (ionic.bundle.js:65400)
at ionic.bundle.js:65377
EDIT 2:
This time I have no errors. I am able to call the submitClicked() from the Save button but the problem now is, the value gets reset back to 37. I've added a console log function in the submitClicked() function as in the edited controller code above.
I'm trying to modify the value of hoursPerWeek by typing in 42, and when I click the Save button, the thing I'm getting on the console is :
Set Value of hoursPerWeek as : 37

Answer 1

You have to use value from localStorage if available
.controller('SettingsCtrl', function($scope, localStorageService) {
$scope.hoursPerWeek = localStorageService.get('hoursPerWeek') || 37;
$scope.submitClicked = function(){
localStorageService.set('hoursPerWeek',$scope.hoursPerWeek);
}
})
And configure your injector to provide it. Otherwise you're just saved it and never used

Answer 2

Here is how I fixed my code. I've made little changes to my HTML. It looks almost similar to the time I asked the question :
<ion-view title="Settings">
<ion-content class="has-header">
<ul class="list">
<label class="item item-input item-label">
<span class="input-label">Hours per week</span>
<input type="text" ng-model="config.hoursPerWeek">
</label>
</ul>
<button class="button button-balanced" ng-click="save()">
Save
</button>
</ion-content>
</ion-view>
Here comes the controller. I've had to make a few changes here. It now looks like this :
.controller('SettingsCtrl' , function($scope, localStorageService) {
$scope.config = {
hoursPerWeek: localStorage.getItem('hoursPerWeek' , 37) || 37
};
$scope.save = function() {
console.log($scope.config.hoursPerWeek);
localStorage.setItem('hoursPerWeek', $scope.config.hoursPerWeek);
};
})
#icewind 's idea actually motivated this answer.
Thanks.