angularjs — UI-роутер и PHP с несколькими представлениями

Я пытаюсь построить веб-приложение с Angularjs и PHP. Я хочу иметь несколько div (с ng-view), которые будут загружать страницы меню, большинство из которых будут php с собственными контроллерами. Проблема в том, что я хочу, чтобы он показывал по одному (например, окно), но любое меню должно загружать в новый div, другими словами, представление, которое является бесплатным.

После поиска и попыток узнать, я дошел до этого ниже, но, возможно, я не понимаю, как это работает.

<div class="container-fluid" ng-app="myApp" ng-controller="appi">
<div class="btn" ng-click="setPage('Normal', 'hello.php', 'teste')">Hello</a>
<div class="btn" ng-clik="setPage('Normal', 'about.php', 'mainpage')">About</a>
<div ui-view="pag1"></div>
<div ui-view="pag2"></div>
<div ui-view="pag3"></div>
</div>

сценарий:

var app = angular.module('myApp', ['ui.router','ui.bootstrap']);
app.config(['$stateProvider','$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$stateProvider
.state('pag1',{
templateUrl: function ($stateParams){return $stateParams.page;},
controllerProvider: function($stateParams){return $stateParams.type;}/*,
onEnter: function(){$stateParams.type.},
onExit: function(title){if(title){ ... do something ... }}*/
})
.state('pag2',{
templateUrl: function ($stateParams){return $stateParams.page;},
controllerProvider: function($stateParams){return $stateParams.type;}
})
$urlRouterProvider.otherwise('hello');}]);
app.run(function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options){
var xx="testeroot";
});});
app.controller('teste', function($scope, $filter, $http, $state, $stateParams) {
$http.defaults.headers.get = {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'};
$scope.mytext="pageteste";});
app.controller('appi', function($scope, $filter, $http, $state, $stateParams) {
$scope.myPages = {'Normal':{'pag1':false, 'pag2':false}, 'Special':{'config':false, 'caixa':false}};
$scope.setPage = function($page, $url, $type){
var currentState = $state.current; var currentName = $stateParams.page;var available = [];
angular.forEach($scope.myPages.Normal, function(value, key){if(value===false) available.push(key);})
if($page=='Normal' && available.length==0) return "Por Motivos de Performance terá de fechar alguma janela antes de Abrir esta.";
else if($page=='Normal' && available.length>0) {$state.go(available[0], {page:$url, type:$type},{location:'replace', notify:true});}
};});
app.controller('mainpage', function($scope, $filter, $http, $state, $stateParams) {
$http.defaults.headers.get = {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'};
$http.get($scope.$resolve.$state$.url+"trata.php", {params:{action: 'getshops'}}).then(function (response) {
$scope.mytot = response.data;
});});

в консоли нет ошибок, есть идеи, что не так? или подход совершенно неверный?