Angular - Assign/Store a Selected Option to Scope Variable For Use

Question

I have a select option with the options of yes or no.

<select ng-model="selectedAnsw" ng-options="answ.text for answ in answs"></select>

$scope.answs = [
            {
                text: "Yes",
                value: Yes
            },
            {
                text: "No",
                value: no
            } ];

I want to store what the user selects in $scope.selectedAnsw and have it save + populate the select. So if the user selects No and then navigates to a different page and comes back to yes/no page No is preselected because they selected it a bit ago/it was stored. I don't need to keep the selection forever, just during this session. Thinking this might have to do with $rootScope + ng-select.

So to be clear, this is NOT a single page application? It's an Angular app with multiple html pages? — azium, Oct 30 '15 at 20:31
don't use `$rootScope` for this, `$rootScope` is not meant to be a dumping ground for data you want to use in multiple views..... — Claies, Oct 30 '15 at 20:32
I think the point @azium is trying to make is that **views** are not the same as **pages**, and you should be clear which is which. — Claies, Oct 30 '15 at 20:33
Then you'll need to use https://developer.mozilla.org/en/docs/Web/API/Window/localStorage or https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage save the values there and load them at the top of your service / controller. — azium, Oct 30 '15 at 20:34
Then you want this: http://stackoverflow.com/questions/21919962/angular-share-data-between-controllers — azium, Oct 30 '15 at 20:37

score 0 · Answer 1 · answered Oct 30 '15 at 20:42

You can use service to achieve this. Create a service with setter and getter methods. Inject the service in your controller.

Now whenever user selects any option set it in service using setter, and when user comes back to same page, use getter method to get the user selection.

For setting it back to your select box you can take the object from your service and directly assign it to your ng-model.

For e.g

$scope.selectedAnsw = yourServiceValue

Below is simple snippet explaining the use of service.

var app = angular.module("myapp", []);

app.controller("testCntrl", function($scope, storeData) {
  $scope.selectedAnsw = {};

$scope.answs = [
            {
                text: "Yes",
                value: "Yes"
            },
            {
                text: "No",
                value: "no"
            } ];
  
  $scope.getAns = function() {
    $scope.userAns =  storeData.getUserAns();
  }
  
  $scope.setAns = function(ans) {
    storeData.setUserAns(ans);
  }
})
.service("storeData", function(){
  this.setUserAns = function(ans) {
    this.ans = ans;
  }
  
  this.getUserAns = function() {
    return this.ans;
  }
})
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
  <div ng-controller="testCntrl">
<select ng-model="selectedAnsw" ng-options="answ.text for answ in answs" ng-change="setAns(selectedAnsw)">
     <option value="" disabled>Select An Answer</option></select>
</select>
  <div>User Selected : {{selectedAnsw}}</div>
  
  <button ng-click="getAns()">Show user selection</button>
  <div>User had Selected : {{userAns}}</div>
    </div>
  </div>

Angular - Assign/Store a Selected Option to Scope Variable For Use

1 Answers1