title: Form Submission in Modal Window and Refresh Content of a Tab
body: <p>I have 2 tabs: list.brands and add.brand:</p>
  
  <pre><code>&lt;script type="text/ng-template" id="list.brands"&gt;
          &lt;table class="table table-striped table-bordered bootstrap-datatable datatable dataTable" id="DataTables_Table_0" aria-describedby="DataTables_Table_0_info" ng-controller="BrandsCtrl"&gt;
                      &lt;input type="text" ng-model="searchBox"&gt;
                      &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;&lt;tags:label text="brandid"/&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;tags:label text="name"/&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;tags:label text="isactive"/&gt;&lt;/th&gt;
                          &lt;th&gt;&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr id="actionresult{{$index + 1}}" ng-repeat="brand in brands | filter:searchBox"&gt;
                              &lt;td&gt;{{brand.brandid}}&lt;/td&gt;
                              &lt;td&gt;{{brand.name}}&lt;/td&gt;
                              &lt;td&gt;{{brand.isactive}}&lt;/td&gt;
  
                              &lt;td&gt;
                              &lt;a class="btn btn-ext-darkblue btn-ext-darkblue savestockbtn" ng-click="open(brand.brandid)"&gt;&lt;tags:label text="edit"/&gt;&lt;/a&gt;
                              &lt;a class="btn btn-ext-darkblue btn-modal-trigger btn-ext-darkblue savestockbtn" href="/admin.brands/deleteConfirm?brandid={{brand.brandid}}" data-toggle="modal" &gt;&lt;tags:label text="delete"/&gt;&lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
      &lt;/script&gt;
  
  
      &lt;script type="text/ng-template" id="add.brand"&gt;
      &lt;div class="row-fluid sortable"&gt;
          &lt;div class="box span12"&gt;
              &lt;div class="box-content"&gt;
                  &lt;form class="form-horizontal" action='/admin.brands/add' data-toggle="modalform" data-popup="modal" name="brandform"&gt;
                          &lt;div class="section-heading"&gt;&lt;/div&gt;
                          &lt;div class="control-group"&gt;
                              &lt;label class="control-label" for="selectError"&gt;&lt;tags:label text="name"/&gt; *&lt;/label&gt;
                              &lt;div class="controls"&gt;
                                  &lt;input name="name" required/&gt;
                                  &lt;span ng-show="brandform.name.$error.required"&gt; Name is required. &lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="control-group"&gt;
                              &lt;label class="control-label" for="selectError"&gt;&lt;tags:label text="isactive"/&gt; &lt;/label&gt;
                              &lt;div class="controls"&gt;
                                  &lt;input type="checkbox" name="isactive" value="1"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="section-heading"&gt;&lt;tags:label text="logo"/&gt;&lt;/div&gt;
                          &lt;div class="control-group"&gt;
                              &lt;label class="control-label" for="textarea2"&gt;&lt;/label&gt;
                              &lt;div class="controls"&gt;
                                  &lt;template:file.upload dropzoneWidth="200px" dropzoneHeight="160px" maxFiles="1"&gt;&lt;/template:file.upload&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="form-actions"&gt;
                              &lt;a href="/admin.brands" class="btn btn-ext-darkblue"&gt;&lt;tags:label text="close"/&gt;&lt;/a&gt;
                              &lt;button ng-disabled="brandform.name.$invalid" type="submit" class="btn btn-ext-lightblue"&gt;&lt;tags:label text="save"/&gt;&lt;/button&gt;
                          &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>I switch them with </p>
  
  <pre><code>&lt;div class="content-header"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="content-name span4"&gt;
                          &lt;h3&gt;&lt;i class="glyphicon glyphicon-bold"&gt;&lt;/i&gt;&lt;tags:label text="brands"/&gt;&lt;/h3&gt;
                      &lt;/div&gt;
                      &lt;div class="span8 button-group"&gt;
                          &lt;jsp:include page="/admin/jsp/screens/help-button-inc.jsp"&gt;&lt;/jsp:include&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div ng-app="myApp" ng-controller="TabsCtrl"&gt;
               &lt;div id="tabs" &gt;
                  &lt;ul class="nav nav-tabs content-tab-header" id="content_tab_0"&gt;
  
                      &lt;li ng-repeat="tab in tabs" ng-class="{active:isActiveTab(tab.url)}" ng-click="onClickTab(tab)"&gt;&lt;a&gt;&lt;i class="{{tab.cssClass}}"&gt;&lt;/i&gt;&lt;tags:label text="{{tab.title}}"/&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
               &lt;/div&gt;
               &lt;div id="mainView"&gt;
                  &lt;div ng-include="currentTab"&gt;&lt;/div&gt;
               &lt;/div&gt;
  </code></pre>
  
  <p>At list, I can open a modal window that contains brand details by clicking edit button in list.brands. My modal window:</p>
  
  <pre><code>&lt;div class="row-fluid sortable"&gt;
      &lt;div class="box span12"&gt;
          &lt;div class="box-content"&gt;
          &lt;form class="form-horizontal" name="brandform" action='/admin.brands/update' data-toggle="validate" method="post"&gt;
              &lt;fields:form formName="brand.id.form"&gt; 
                  &lt;input type="hidden" name="brandid" value="{{item.brandid}}"/&gt;
              &lt;/fields:form&gt; 
              &lt;fields:form formName="brand.form"&gt;  
                  &lt;div class="section-heading"&gt;&lt;/div&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label" for="selectError"&gt;&lt;tags:label text="name"/&gt; *&lt;/label&gt;
                      &lt;div class="controls"&gt;
  
                          &lt;input name="name" value="{{item.name}}" required/&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="control-group"&gt;
                      &lt;label class="control-label" for="selectError"&gt;&lt;tags:label text="isactive"/&gt; &lt;/label&gt;
                      &lt;div class="controls"&gt;
                          &lt;input type="checkbox" ng-checked="item.isactive" name="isactive" value="1"/&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/fields:form&gt; 
                  &lt;div class="form-actions"&gt;
                      &lt;a ng-click="cancel()" class="btn btn-ext-lightblue"&gt;&lt;tags:label text="close"/&gt;&lt;/a&gt;
                      &lt;a ng-click="ok()" class="btn btn-ext-darkblue btn-disable-on-submit" &gt;&lt;tags:label text="save"/&gt;&lt;/a&gt;
                  &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my app is here:</p>
  
  <pre><code>&lt;script&gt;
  var app = angular.module('myApp', ['ui.bootstrap']);
  
  app.controller("BrandsCtrl", function($scope, $http, $controller) {
        $http.get('/admin.brands/getJSONDataOfSearch').
          success(function(data, status, headers, config) {
            $scope.brands = data;
          }).
          error(function(data, status, headers, config) {
  
          });
        angular.extend(this, $controller("BrandCtrl", {$scope: $scope}));
      });
  
  app.controller("BrandCtrl", function ($scope, $http, $modal) {
      $scope.animationsEnabled = true;
      $scope.open = function (id) {
          var modalInstance = $modal.open({
              animation: $scope.animationsEnabled,
              templateUrl: '/admin.brands/edit',
              controller:gg,
              resolve: {
                  item: function($http) {
                      return $http.get('/admin.brands/getJsonBrandAndEdit?brandid=' + id)
                          .then(function(response) {
                              return response.data;
                          });
                  }
              }
          });
      }
  });
  
  var gg = function ($scope, $modalInstance, item) {
      $scope.item  =  item;
      $scope.ok = function () {
          $scope.form.brandform.submit();
          $modalInstance.close();
        };
  
        $scope.cancel = function () {
  
          $modalInstance.dismiss();
        };
  }
  app.controller('TabsCtrl', ['$scope', function ($scope) {
      $scope.tabs = [{
              title: 'list.brands',
              url: 'list.brands',
              cssClass: 'icon-th-list'
          }, {
              title: 'add.brand',
              url: 'add.brand',
              cssClass: 'icon-plus'
      }];
      $scope.currentTab = 'list.brands';
      $scope.onClickTab = function (tab) {
          $scope.currentTab = tab.url;
      }
      $scope.isActiveTab = function(tabUrl) {
          return tabUrl == $scope.currentTab;
      }
  }]);
  
  &lt;/script&gt;
  </code></pre>
  
  <p>My questions is; how can I submit my edit form in modal to a target URL and refresh the list of brands.</p>