UI Router updating views in multiple angular apps on single page

Question

I have multiple Angular apps on a single page each with their own state configuration, but when I transition between states, the ui-view elements are updated in all the angular apps on the page. How can I restrict the state change to each angular app?

I am not able to use named views as the HTML blocks are dynamically added to the page as part of a portal product, but there will only ever be a single view in each app

The following plunkr is a very simplified version of the issue: https://plnkr.co/edit/9QV4DySsL3JFK0KoL35C?p=preview

The plnkr has 2 apps, bootstrapped separately, but when I change state in one app it is also updated in the other app.

html

<div id='1'>
    <a ui-sref="hello" ui-sref-active="active">Hello</a>
    <a ui-sref="about" ui-sref-active="active">About</a>

    <ui-view></ui-view>
</div>

<div id='2'>
    <a ui-sref="hello" ui-sref-active="active">Hello</a>
    <a ui-sref="about" ui-sref-active="active">About</a>
    <ui-view></ui-view>
</div>

<script type="text/javascript">
    angular.bootstrap(document.getElementById('1'), ['1']);
    angular.bootstrap(document.getElementById('2'), ['2']);
</script>

JS

 angular.module('1', ['ui.router']);
 // state config
 angular.module('2', ['ui.router']);
 // state config

Answer 1

That is because your are not defining separate model add ng-app to your two model like

<div id='1' ng-app="app2">
  <a ui-sref="hello" ui-sref-active="active">Hello</a>
  <a ui-sref="about" ui-sref-active="active">About</a>

  <ui-view></ui-view>
</div>

<div id='2' ng-app="app2">
  <a ui-sref="hello" ui-sref-active="active">Hello</a>
  <a ui-sref="about" ui-sref-active="active">About</a>

  <ui-view></ui-view>
</div>
<script type="text/javascript">
    angular.bootstrap(document.getElementById('1'), ['1']);
    angular.bootstrap(document.getElementById('2'), ['2']);
</script>

JS

angular.module('app1', ['ui.router']);
 // state config
 angular.module('app2', ['ui.router']);
 // state config

you need to combine the two model

angular.module("CombineModule", ["app1", "app2"]);

Check this example: https://plnkr.co/edit/ceZljtnFzQQJuKIFjiyZ?p=preview