title: Modify variable of parent controller inside child controller AngularJS 1.x
body: <p>I have my body controlled by a <code>MainController</code>. In the body, I have another nested controller. In my <code>index.html</code>, I have a <code>div</code> element controlled by the nested controller:</p>
  
  <p><em>index.html</em></p>
  
  <pre><code>&lt;body ng-controller="MainController"&gt;
    &lt;div ng-controller="LoginController" ng-hide="isLoggedIn"&gt;&lt;/div&gt;
    &lt;div class="navbar" ng-hide="!isLoggedIn"&gt;
      &lt;!-- A form which calls login() function inside LoginController --&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><em>MainController:</em></p>
  
  <pre><code>angular.module('DemoApp')
      .controller('MainController', ['$scope', function ($scope) {
      $scope.isLoggedIn = false;
  }]);
  </code></pre>
  
  <p><em>LoginController</em></p>
  
  <pre><code>angular.module('DemoApp')
      .controller('LoginController', ['$scope', '$location', function ($scope, $location) {
      $scope.login = function () {
         if($scope.loginCredentials.username === 'username' &amp;&amp; $scope.loginCredentials.password === 'password') {
              $scope.parent.isLoggedIn = true; /* here, how to modify this variable */
              $location.path('/home');
          }
     };
  }]);
  </code></pre>
  
  <p>All I want to do is change the variables of <code>MainController</code>, which is <code>isLoggedIn</code>, from my nested controllers. I used <code>$scope.parent</code>, but it shows <code>unknow provider parent</code>. How to achieve this?</p>