<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="TabsController">
<div>Testing AngularUI tabs</div>
<uib-tabset type="tabs">
<uib-tab ng-repeat="tab in tabs" heading="{{tab.heading}}" active="tab.active" disabled="tab.disabled">
<content></content>
</uib-tab>
<uib-tab heading="Output" active="outputTabActive" disabled="outputTabDisabled">
<output></output>
</uib-tab>
</uib-tabset>
<br/>
<div ng-controller="NavigationController">
<button type="button" class="btn btn-default" ng-click="addNewTab()">Add new tab</button>
<!--button type="button" class="btn btn-default" ng-click="showAllData()">Show all data</button-->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</body>
</html>
'use strict';
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('TabsController', function($scope, $rootScope) {
console.log("Scope id of TabsController: " + $scope.$id);
$rootScope.tabs = [{heading: "First tab", active: true, selected: true}];
$rootScope.collectedData = [];
$rootScope.outputTabActive = false;
$rootScope.outputTabDisabled = false;
$rootScope.$on('addNewTab', addNewTab);
function addNewTab() {
var previousTab = $rootScope.tabs.pop();
previousTab.active = false;
previousTab.selected = false;
$rootScope.tabs.push(previousTab);
$rootScope.tabs.push({heading: "New tab", active: true, selected: true});
}
});
app.controller('TabController', function($scope, $rootScope) {
console.log("Scope id in tab is: " + $scope.$id);
$rootScope.$on('collectDataFromCurrentTab', collectDataFromTab);
function collectDataFromTab() {
console.log("Scope id in collectDataFromCurrentTab: " + $scope.$id);
var collector = {};
collector.currentName = $scope.name;
collector.currentAddress = $scope.address;
$rootScope.collectedData.push(collector);
console.log("Collected data: " + collector.currentName + " - " + collector.currentAddress);
}
});
app.controller('NavigationController', function($scope, $rootScope) {
$scope.addNewTab = function() {
$rootScope.$broadcast('collectDataFromCurrentTab');
$rootScope.$broadcast('addNewTab');
}
});
app.directive('content', function() {
return {
restrict: 'E',
scope: true,
controller: 'TabController as $tabCtrl',
bindToController: true,
templateUrl: 'content.html'
}
});
app.directive('output', function() {
return {
restrict: 'E',
/*scope: true,
controller: 'OutputController as $outCtrl',
bindToController: true,*/
templateUrl: 'output.html'
}
});
<div class="container">
<br/>
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">Name: </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputName" ng-model="name">
</div>
</div>
<div class="form-group">
<label for="inputCity" class="col-sm-2 control-label">City: </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputCity" ng-model="address">
</div>
</div>
</div>
<div class="container">
<br/>
<div ng-repeat="data in collectedData">
{{data.currentName}} : {{data.currentAddress}}
</div>
</div>