Angular - Best way to load html page inside tab's content

Question

I have multiple tabs in one master.html page and in every tab different tab*.html page is getting loaded. The page getting loaded inside tab's content has angularjs code

Now issue here is when I load tab*.html separately is working as expected. Here Plunker for single page

However, When I load the same code inside tab's content, it's not working. Here Plunker with tabs

Any idea how to resolve this issue?

Answer 1

I moved the script from home.html to index.html and removed the ng-app from the home.html.

<script>

      app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
      angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
          $scope.tabs = [
              { title:'Home', content:'home content', url:'home.html' },
              { title:'Manage Users', content:'Manage Users content', url:'manageUsers.html'},
              { title:'Manage Configuration', content:'Manage Configuration content', url:'manageConfiguration.html'},
              { title:'Manage Server', content:'Manage Server content' , url:'manageServer.html'},
              { title:'Manage Audit', content:'Manage Audit content', url:'manageAudit.html'},
          ]; 
      });
      app.controller('personCtrl', function($scope) {
        $scope.firstName = "John",
        $scope.lastName = "Doe"
        $scope.myVar = false;
        $scope.toggle = function() {
          $scope.myVar = !$scope.myVar;
          }
      });
  </script>

Sorry about my previous stupid answer.

Updated & Working Plunker