Q:

how to connect between bootstrap ui modal input to html page with angular

I have two pages of html.  one is the main page and the other is the modal page. 
I use one angular app to connect between them.  I get input in the modal page and i want to show it in the main page.  i don't know how to do it, although I think it might work with service. 
the main page:
<! doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
    <script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="ModalDemoCtrl">
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
    <table ng-controller="tableCtrl">
        <thead>
        <th class="col-lg-3">Username</th>
        <th class="col-lg-3">Password</th>
        <th class="col-lg-3">First name</th>
        <th class="col-lg-3">Last name</th>
        </thead>
        <tbody>
            <tr ng-repeat="User in Users">
                <td class="col-lg-3">{{User.userN}}</td>
                <td class="col-lg-3">{{User. PassW}}</td>
                <td class="col-lg-3">{{User. Name}}</td>
                <td class="col-lg-3">{{User. LastName}}</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

the modal page : 
<! DOCTYPE html>
<html lang="en">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
    <script src="app.js"></script>
    <link href="vandors/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form ng-app="ui.bootstrap.demo" ng-controller="ModalDemoCtrl" ng-submit="ok()">
        <div class="modal-header">
            <h3>users</h3>
        </div>
        <div class="modal-body">
            <div class="panel-body">
                <div class="form-group">
                    <label>Username : </label>
                    <input type="text" placeholder="Ariel73" ng-model="userN">
                </div>
                <div class="form-group">
                    <label>Password : </label>
                    <input type="text" placeholder="Aa123456" ng-model="PassW">
                </div>
                <div class="form-group">
                    <label>First name : </label>
                    <input type="text" placeholder="Ariel" ng-model="Name">
                </div>
                <div class="form-group">
                    <label>Last name : </label>
                    <input type="text" placeholder="Livshits" ng-model="LastName">
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success">submit</button>
            </div>
        </div>
    </form>
</body>
</html>

the app page :
app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $modal) {

    $scope.open = function () {

        var modalInstance = $modal.open({
            templateUrl: 'table.html',
            controller: 'ModalInstanceCtrl',
        });
    };
});

// Please note that $modalInstance represents a modal window (instance) dependency. 
// It is not the same as the $modal service used above. 

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.close($scope);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

app.controller('tableCtrl',function($scope){
    $scope. Users = [
        {'userN' : 'Ariel', 'PassW' : 'Aa123456', 'Name' : 'Ariel', 'LastName' : 'Livshits'},
        {'userN' : 'Ariel', 'PassW' : 'Aa123456', 'Name' : 'Ariel', 'LastName' : 'Livshits'},
        {'userN' : 'Ariel', 'PassW' : 'Aa123456', 'Name' : 'Ariel', 'LastName' : 'Livshits'}
    ];
    $scope.addRow = function () {
        $scope. Users.push({'userN' : $scope.userN, 'PassW' : $scope. PassW, 'Name' : $scope. Name, 'LastName' : $scope. LastName});
        $scope.userN = '';
        $scope. PassW = '';
        $scope. Name = '';
        $scope. LastName = '';
    }
});

A:

Angular is used with Single Page Applicaton layout, it seems that must only exists a single page for application (ng-app) and it may use multiple partials or templates.  
Usually the main page contais the web layout (header, navbar, content, footer) and with the templates switch the content according to the current state (managed by the url)
In your example the main page will be the "single page" and the modal will be s partial/template.  This template could be request to the server as response of table.html or defined as a template within the  main page using <script type='text/ng-template' id='table.html'>. 

app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
app.controller('AppCtrl', function($scope, $modal, $log) {
  $scope. Users = [{
    'userN': 'Ariel',
    'PassW': 'Aa123456',
    'Name': 'Ariel',
    'LastName': 'Livshits'
  }, {
    'userN': 'Ariel',
    'PassW': 'Aa123456',
    'Name': 'Ariel',
    'LastName': 'Livshits'
  }, {
    'userN': 'Ariel',
    'PassW': 'Aa123456',
    'Name': 'Ariel',
    'LastName': 'Livshits'
  }];
  
  $scope.open = function() {

    var modalInstance = $modal.open({
      templateUrl: 'table.html',
      controller: 'ModalInstanceCtrl'
    });
    modalInstance.result.then(function(newUser) {
      $scope. Users.push(newUser);
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});

// Please note that $modalInstance represents a modal window (instance) dependency. 
// It is not the same as the $modal service used above. 

app.controller('ModalInstanceCtrl', function($scope, $modalInstance) {
  $scope.ok = function() {
    $modalInstance.close({
        'userN': $scope.userN,
        'PassW': $scope. PassW,
        'Name': $scope. Name,
        'LastName': $scope. LastName
      });
  };

  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  };
});
<! doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
  <script src="app.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

  <div ng-controller="AppCtrl">
    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
    <table>
      <thead>
        <th class="col-lg-3">Username</th>
        <th class="col-lg-3">Password</th>
        <th class="col-lg-3">First name</th>
        <th class="col-lg-3">Last name</th>
      </thead>
      <tbody>
        <tr ng-repeat="User in Users">
          <td class="col-lg-3">{{User.userN}}</td>
          <td class="col-lg-3">{{User. PassW}}</td>
          <td class="col-lg-3">{{User. Name}}</td>
          <td class="col-lg-3">{{User. LastName}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script type="text/ng-template" id="table.html">
    <form ng-submit="ok()">
      <div class="modal-header" >
        <h3>users</h3>
      </div>
      <div class="modal-body">
        <div class="panel-body">
          <div class="form-group">
            <label>Username :</label>
            <input type="text" placeholder="Ariel73" ng-model="userN">
          </div>
          <div class="form-group">
            <label>Password :</label>
            <input type="text" placeholder="Aa123456" ng-model="PassW">
          </div>
          <div class="form-group">
            <label>First name :</label>
            <input type="text" placeholder="Ariel" ng-model="Name">
          </div>
          <div class="form-group">
            <label>Last name :</label>
            <input type="text" placeholder="Livshits" ng-model="LastName">
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit"  class="btn btn-success">Submit</button>
        </div>
      </div>
    </form>
  </script>
</body>

</html>

