Angular doesn't Open Correct Modal - angularjs

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">
<tags:label text="close"/>
<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;
}
}
});
}});