SO - Plunker

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script data-require="angular.js@1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
    <script data-require="ui-router@0.2.18" data-semver="0.2.18" src="//cdn.rawgit.com/angular-ui/ui-router/0.2.18/release/angular-ui-router.js"></script>
    <script data-require="angular-ui-bootstrap@*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="demo">
    <h1>Hello World</h1>
    <div ui-view></div>
  </body>

</html>

// Code goes here

(function() {
  "use strict";
  angular.module('demo', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise("/");
      $stateProvider
        .state('home', {
          url: '/',
          views: {
            '': {
              templateUrl: 'home.html'
            },
            'view1@home': {
              templateUrl: 'view1.html'
            },
            'view2@home': {
              templateUrl: 'view2.html'
            }
          }
        })
        .state('home.child1', {
          url: '/child1',
          templateUrl: 'view1-child1.html'
        })
        .state('home.child2', {
          url: '/child2',
          templateUrl: 'view1-child2.html'
        })
        .state('home.modal1', {
          parent:'home',
          url: '/someModal',
          onEnter: ['$stateParams', '$state', '$modal', '$resource', function($stateParams, $state, $modal, $resource) {
            
             $modal.open({
              template: 'modaltemplate.html',
              backdrop: false,
            })          }]
        });
    }])
})();

/* Styles go here */

.home {
  border: 1px solid black;
  padding: 1em;
}

.view1 {
  padding: 1em;
  border: 1px solid blue;
}

.view2 {
  padding: 1em;
  border: 1px solid red;
}

.child1 {
  padding: 1em;
  border: 1px solid green;
}

.child2 {
  padding: 1em;
  border: 1px solid yellow;
}

<div class="view1">
  this is view1.html

<button  type="button" ui-sref="home.child1">Go to child1</button>
<button  type="button" ui-sref="home.child2">Go to child2</button>

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

<div class="view2">
  This is view2.html
  
  <a ui-sref='.modal1'>Open Modal</a>
</div>

<div class="child1">
  this is view1-child1.html
</div>

<div class="child2">
  this is view1-child2.html
</div>

<div class="home">
  This is home.html

    <div ui-view="view1"></div>
    <div ui-view="view2"></div>
</div>

 <div class="modal-header">
            <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
        </div>