Angular doesn't Open Correct Modal

Question

I am trying to open edit page:

 <div id="edit" class="span6" ng-controller="BrandsCtrl">
    <script type="text/ng-template" id="editPage">
   <div class="row-fluid sortable">
    <div class="box span12" ng-app="myApp">
        <div class="box-content">
        <form class="form-horizontal" action='/admin.brands/update' data-toggle="validate" method="post">
                <input type="hidden" name="brandid" value="{{brand.brandid}}"/>
                <div class="section-heading"></div>
                <div class="control-group">
                    <label class="control-label" for="selectError"><tags:label text="name"/> *</label>
                    <div class="controls">
                        <input name="name" value="{{brand.name}}" required/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="selectError"><tags:label text="isactive"/> </label>
                    <div class="controls">
                        <input type="checkbox" ng-checked="post.isactive" name="isactive" value="1"/>
                    </div>
                </div>
                <div class="form-actions">
                    <a href="/admin.brands" class="btn btn-ext-lightblue"><tags:label text="close"/></a>
                    <button type="submit" class="btn btn-ext-darkblue btn-disable-on-submit" ><tags:label text="save"/></button>
                </div>
        </form>
    </div>
</div>
  </script>
</div>

by clicking button:

<a class="btn btn-ext-darkblue btn-ext-darkblue savestockbtn" ng-click="open()"><tags:label text="edit"/></a>

but when I click it, current page is opened as modal.

How can I show editPage as modal ? What is wrong that I did ? How can I fix this code ?

here is my controllers:

var app = angular.module('myApp', ['ui.bootstrap']);

    app.controller("BrandsCtrl", function($scope, $http, $controller) {
          $http.get('http://localhost/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) {
      $http.get('http://localhost/admin.brands/getJsonBrandAndEdit?brandid=1').
        success(function(data, status, headers, config) {
          $scope.brand = data;

        }).
        error(function(data, status, headers, config) {

        });
      $scope.animationsEnabled = true;

      $scope.open = function (size) {

            var modalInstance = $modal.open({
              animation: $scope.animationsEnabled,
              templateUrl: 'editPage',
              size: size,
              resolve: {
                item: function () {
                  return $scope.brand;
                }
              }
            });
        }});