title: Javascript Getter/Setter in Angular Service with 2 Controllers
body: <p>I am messing with javascript getters and setters in my service layer. I am using 2 controllers. The first controller just displays some text. The second controller allows hiding it. I am trying to figure out why one method works while another does not. </p>
  
  <p>Here is the working example:</p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.factory('data', function () {
    var fac = [];
    var state = false;
  
    fac.hideIt = function (hide) {
      state = hide;
    };
  
    fac.hidden = function() {
      return state;
    }
  
    return fac;
  });
  
  app.controller('MainCtrl', function($scope, data) {
    $scope.name = 'World';
    $scope.hide = data.hidden;
  });
  
  app.controller('SecCtrl', function($scope, data) {
    $scope.hideAbove = function () {
      var hide = true;
      data.hideIt(hide);
    };
  });
  </code></pre>
  
  <p>Here is the not working example:</p>
  
  <pre><code>var app = angular.module('plunker', []);
  
  app.factory('data', function () {
    var fac = [];
  
    fac.hide = {
                  state: false, 
                  get get() {
                    return this.state
                  }, 
                  set set(hide) {
                    return this.state = hide;
                  }
                };
  
    return fac;
  });
  
  app.controller('MainCtrl', function($scope, data) {
    $scope.name = 'World';
  
    $scope.hide = data.hide.get;
  });
  
  app.controller('SecCtrl', function($scope, data) {
  
    $scope.hideAbove = function () {
      var hide = true;
      data.hide.set = hide;
      console.log(data.hide.get)
    }
  });
  </code></pre>
  
  <p>HTML (shared by both)</p>
  
  <pre><code>&lt;body&gt;
      &lt;div ng-controller="MainCtrl"&gt;
        &lt;div ng-hide="hide()"&gt;
          &lt;p&gt;Hello {{name}}!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div ng-controller="SecCtrl"&gt;
        &lt;div ng-click="hideAbove()"&gt;CLICK HERE &lt;/div&gt;
      &lt;/div&gt;  
  
    &lt;/body&gt;
  </code></pre>
  
  <p>So my question is why does using the getter and setters in the non-working block of code not work? </p>