根据angularJS中的范围变量更改按钮文本

Question

I have a button in my page and its text (OFF / ON) will changes based on a variable in controller. By default the variable value is false, So text will be ON. When user click this button, variable value will be true and text will be OFF.

Through another one button am opening a popup window, there I have this same button. This window will use the same controller.

Issue is, if I change button text by clicking on it that same should reflect in popup window. and changes in popup window should reflect in main page.

.controller('myController', ['$scope', 'myService',
 function ($scope, myService) {
   $scope.btnText = myService.getTextState();
 };

$scope.toggleText = function(){
            $scope.btnText = myService.toggleText($scope.toggleText);;  
        };

 $scope.getTitle = function() {
            if($scope.btnText){
                return "OFF";
            }
            else{
                return  "ON";
            }
        };
]);



.service('plotPanelService',  function () {
 var btnText = false;

  toggleText: function (param) {
                btnText = !param;
                return (!param);
            },
  setTextState: function (paramText) {
                btnText = paramText;
            },

            getTextState: function () {
                return btnText;
            }
}

Answer 1

{{myVar === "true" ? "it's true" : ""}}

Answer 2

if you want share model between two different controller, then you should create a service or factory.

You are saying that, you are using same controller multiple times. Controllers are not singleton. It will be created multiple times. But factory or services are singleton. So you can share same object between two controllers.

Another solution is create wrapper of your model. If you create wrapper object in parent controller then you will have access of that directly in your child controller. Angular providers prototype inheritance. So you will have same object in your child controller.

Checkout following plnkr

var app = angular.module('plunker', ['uiSwitch']);

app.controller('controller', function($scope, myservice) {
  $scope.model = myservice.model;

});

app.service('myservice', function () {

  this.model = {
    enabled: false
  }
}); 

HTML :

  <div  ng-controller="controller">
    <p>Controller 2</p>
    <switch id="enabled" name="enabled" ng-model="model.enabled" class="green"></switch>
  <br>{{ model.enabled }}
    </div>
    <div  ng-controller="controller">
    <p>Controller 2</p>
    <switch id="enabled" name="enabled" ng-model="model.enabled" class="green"></switch>
  <br>{{ model.enabled }}
    </div>