How to change the scope in Angular in a view which you are not yet in.

I have asked this questions many times without getting too much help on it. So I'm asking now if it's possible to change the values in a scope to a controller in a view which you are not in. When I'm referring to views, I mean different HTML pages.

Lets say, I'm in view 1 which is view1.html. The view has two buttons, button 1 and button 2. If I click on button 1 a new view will appear; view2.html which contains a bold text field for example {{test}} . When I click on button1 I want $scope.test to be "button1". Likewise when I click on button 2 I want the same view to open (view2.html), but this time I want the scope to be "button2" and not "button1".

The reason why I want this is to avoid creating many html pages, since I will have many different values after a while. For example, if I have 10 buttons on the first page (view1.html), I don't want to create 10 html pages in order to have different values for each button you click. I want to have 1 html page that can show different values depending on the button clicked. I'm using Appgyver Supersonic (Steroids) to develop this as an app.

I have tried to show and hide different bold tags, but are never able to do it. As you probably guessed, Im a noob with Angular, but I never receive a straight forward answer which is working in practice even how much I try. So please help, show me a easy example where you create two html page and one js. files, and how I can go from the first html page to the second and still show different values depending on my choice in the first view. Thanks! Below is a example code for what I want to achieve, but in this example the scope is not updated when I click on the buttons, it stays the same.

EXAMPLE CODE

view1.html

<div ng-controller="IndexController">
<button class="button button-block button-assertive" ng-click="button1()" value="checkitems" >
  Button1
</button>
<button class="button button-block button-assertive" ng-click="button2()" value="checkitems" >
  Button2
</button>
</div>

Indexcontroller.js

angular
  .module('legeApp')
  .controller('IndexController', function($scope, supersonic, $filter) {  

$scope.test = 'test';

 $scope.button1= function(){   

     $scope.test= 'button1';

        var view = new supersonic.ui.View("legeApp#view2.html");
        var customAnimation = supersonic.ui.animate("flipHorizontalFromLeft");
        supersonic.ui.layers.push(view, { animation: customAnimation });
    };

 $scope.button2= function(){   

     $scope.test= 'button2';

        var view = new supersonic.ui.View("legeApp#view2.html");
        var customAnimation = supersonic.ui.animate("flipHorizontalFromLeft");
        supersonic.ui.layers.push(view, { animation: customAnimation });
    };
});

View2.html

<div ng-controller="IndexController">
<div class="card">
  <div class="item item-text-wrap">
    Test<b>{{test}} </b>
  </div>
</div>
    </div>

You can use $rootScope.$emit and $rootScope.$on to handle communication between different $scope or controller.

angular
  .module('legeApp')
  .controller('IndexController', function($scope, $rootScope, supersonic, $filter) {
    $scope.button1= function(){   
       $rootScope.$emit('myCustomEvent', 'Data to send');
    };

  })
  .controller('IndexController2', function($scope, $rootScope, supersonic, $filter) {
    $rootScope.$on('myCustomEvent', function (event, data) {
      console.log(data); // 'Data to send'
    });
  });