why Ng Repeat is not working if button invoked from a different form?
<p>I have a html table that contains an ng repeat directive and two button.The first one will open a modal that contains a new form and let me create my user and then when i click save it will add it to the list.The second one is in the same original form and do the add a user.</p>

<p>What i did not understand why when i click on the first button which is in a different form i can not update the ng repeat however for the second one it's possible.
This is the code:</p>

<p>homepage.jsp</p>

<pre><code>&lt;body ng-app="myApp"&gt;
    &lt;div class="generic-container" ng-controller="UserController as ctrl"&gt;
        &lt;div id="createUserContent.jsp" ng-include="createUserContent"&gt;&lt;/div&gt;
        &lt;table&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;button type="button" class="btn btn-primary"
                    ng-click="ctrl.openCreateUser()"&gt;Create&lt;/button&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
        &lt;table class="table table-hover"&gt;
            &lt;thead&gt;
                &lt;tr&gt;
                    &lt;th&gt;ID.&lt;/th&gt;
                    &lt;th&gt;Name&lt;/th&gt;
                    &lt;th&gt;Address&lt;/th&gt;
                    &lt;th&gt;Email&lt;/th&gt;
                    &lt;th width="20%"&gt;&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                &lt;tr ng-repeat="u in ctrl.users"&gt;
                    &lt;td&gt;&lt;span ng-bind="u.ssoId"&gt;&lt;/span&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;span ng-bind="u.firstName"&gt;&lt;/span&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;span ng-bind="u.lastName"&gt;&lt;/span&gt;&lt;/td&gt;
                    &lt;td&gt;&lt;span ng-bind="u.email"&gt;&lt;/span&gt;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>user_controller.js</p>

<pre><code>'use strict';

App.controller('UserController', function ($scope, UserService, $window, $log, $uibModalStack,
        $uibModal, $rootScope) {
    var self = this;

    self.users = [];

    self.fetchAllUsers = function () {
        console.log('----------Start Printing users----------');
        for (var i = 0; i &lt; self.users.length; i++) {
            console.log('FirstName ' + self.users[i].firstName);
        }
    };
        /**
    this function will not work
    **/
    self.saveUser = function (user) {
        self.users.push(user);
        self.fetchAllUsers();
        $log.log("saving user");
        $uibModalStack.dismissAll();
    };

    /**
    this function works fine
    **/
    self.addNewRow = function () {
        var specialUser = {
                id : 12,
                firstName : 'john',
                lastName: 'travolta',
                homeAddress : {location:'chicago'},
                email : 'trav@email.com'
        };
        self.users.push(specialUser);
        $log.log("saving specialUser");
    };
    self.openCreateUser = function () {

        var modalInstance = $uibModal.open({
                animation : true,
                templateUrl : 'createUserContent',
                controller : 'UserController',
                resolve : {
                    items : function () {
                        return $scope.items;
                    }
                }
            });

        modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
        }, function () {
            $log.info('Modal dismissed at: ' + new Date());
        });
    };
    self.fetchAllUsers();
});
</code></pre>

<p>createUserContent.jsp</p>

<pre><code>&lt;form role="form" ng-controller="UserController as ctrl" &gt;
    &lt;div class="form-group"&gt;
        &lt;label for="FirstName"&gt;FirstName&lt;/label&gt; &lt;input type="FirstName"
            ng-model="ctrl.user.firstName" class="form-control"
            id="FirstName" placeholder="Enter FirstName" /&gt; &lt;label
            for="lastName"&gt;lastName&lt;/label&gt; &lt;input type="lastName"
            class="form-control" id="lastName"
            ng-model="ctrl.user.lastName" placeholder="Enter lastName" /&gt;
        &lt;label for="email"&gt;Email address&lt;/label&gt; &lt;input type="email"
            ng-model="ctrl.user.email" class="form-control" id="email"
            placeholder="Enter email" /&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="homeAddressLocation"&gt;Home Address&lt;/label&gt; &lt;input class="form-control"
            ng-model="ctrl.user.homeAddress.location" id="homeAddressLocation"
            placeholder="homeAddressLocation" /&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
        &lt;label for="SSOId"&gt;SSOId&lt;/label&gt; &lt;input class="form-control"
            ng-model="ctrl.user.ssoId" id="SSOId" placeholder="SSOId" /&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="btn btn-default"
        ng-click="ctrl.saveUser(ctrl.user)"&gt;Save&lt;/button&gt;
    &lt;button type="submit" class="btn btn-default"&gt;Cancel&lt;/button&gt;
&lt;/form&gt;
</code></pre>