title: AngularJS - Save user preferences in a service
body: <p>This is my partial view <code>settings.html</code></p>
  
  <pre><code>&lt;div ng-controller="settingsController"&gt;
  
      &lt;h3&gt;General Settings&lt;/h3&gt;
      &lt;table class="table"&gt;
          &lt;tbody&gt;
          &lt;tr class="success"&gt;
              &lt;td class = "col-xs-3"&gt;Language:&lt;/td&gt;
              &lt;td class = "col-xs-9"&gt;Gmail display language:
                  &lt;select ng-model = "userPreferences.selectedLang" ng-options="language for language in languages"&gt;
                      &lt;option value = ""&gt; Choose a language &lt;/option&gt;
                  &lt;/select&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr class="danger"&gt;
              &lt;td class = "col-xs-3"&gt;Conversation View&lt;/td&gt;
              &lt;td class = "col-xs-9"&gt;
                  &lt;input type = "radio" name = "conversation" id = "converseOn" ng-model="userPreferences.converse.state" value = "on" checked&gt;
                  &lt;label for="converseOn"&gt; Conversation view on &lt;/label&gt;
  
                  &lt;aside&gt;
                      &lt;input type = "radio" name = "conversation" ng-model="userPreferences.converse.status" value = "off" id = "converseOff"&gt;
                      &lt;label for="converseOff"&gt; Conversation view off &lt;/label&gt;
                  &lt;/aside&gt;
          &lt;/tr&gt;
  
          &lt;tr class="info"&gt;
              &lt;td class = "col-xs-3"&gt;Maximum page size: &lt;/td&gt;
              &lt;td class = "col-xs-9"&gt; Show conversations per page
                  &lt;select ng-model = "userPreferences.selectedNumber" ng-options="conversation for conversation in conversations"&gt;
                      &lt;option value = ""&gt; Choose the no.of conversations to display &lt;/option&gt;
                  &lt;/select&gt;
  
                  &lt;aside id = "pageSize" &gt; Show contacts per page
                      &lt;select ng-model = "selectedNumberContacts" ng-options="contact for contact in contacts"&gt;
                          &lt;option value = ""&gt; Choose the no.of contacts to display &lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/aside&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
       &lt;/tr&gt;
     &lt;/tbody&gt;
    &lt;/table&gt;
  
      &lt;div class="form-actions" &gt;
          &lt;button type="submit" class="btn btn-primary" ng-click = "setPreference()"&gt;Save changes&lt;/button&gt;
          &lt;button type="button" class="btn"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the <code>settingsController.js</code></p>
  
  <pre><code>(function() {
      'use strict';
  
      var settingController = function (fetchDataService, $scope, savePreferenceService) {
          var url = 'app/mock/settings.json';
          fetchDataService.getContent(url)
              .then(function(response){
                  $scope.contacts = response.data.contacts;
                  $scope.languages = response.data.languages;
                  $scope.conversations = response.data.conversations;
                  $scope.undoSend = response.data.undoSend;
              });
  
          $scope.userPreferences = {
              selectedLang : '',
  
               converse : {
                    state: 'on'
                   },
  
                selectedNumber : 0
            }
  
  
         $scope.setPreference = function () {
              savePreferenceService.selectedPreferences($scope.userPreferences.selectedLang, $scope.userPreferences.converse.state, $scope.userPreferences.selectedNumber);
          }
      };
  
      angular.module('iisEmail')
          .controller ('settingsController',
          ['fetchDataService', '$scope', 'savePreferenceService', settingController]);
  }());
  </code></pre>
  
  <p>This is the <code>savePreferenceService.js</code></p>
  
  <pre><code>(function() {
    'use strict';
  
    var savePreferenceService = function () {
          this.selectedPreferences = function (selectedLang, converse, selectedNumber) {
              this.selectedLang = selectedLang;
              this.converse = converse;
              this.selectedNumber = selectedNumber;
  
              console.log(this.selectedLang);
              console.log(this.converse);
              console.log(this.selectedNumber);
          }
    };    
  
        angular.module('iisEmail')
          .service ('savePreferenceService', savePreferenceService);
  }());
  </code></pre>
  
  <p>So, basically my goal is to save user preferences when the <code>Save changes</code> button is clicked. </p>
  
  <p>To achieve this functionality, I have defined an object in the controller, and binded its properties to the view using <code>ng-model</code>. When the save changes button is clicked, the <code>setPreference()</code> function is called which makes a service <code>savePreferenceService</code> call. The <code>savePreferenceService</code> saves options chosen by the user. Everything works as expected. </p>
  
  <p>I just want to know if there is a better way of doing this (in terms of best practices). My requirement is to save the options chosen by a user in a service. </p>