angularjs show/hide tabs - angularjs

Question

Here i am displaying tabs from array using angularjs and bootstrap.
What i want is when i click on particular tab it should display content of that tab only.
i.e(When i click on dynamic-2 i want to display content of dynamic 2 and hide the content of dynamic-1 and dynamic-3 tab)
Right now i am getting content of all tabs on clicking.
js file
var items=[
{
Name:"tab1",
id:1,
content:"FirstTab",
title:"Dynamic-1",
templateUrl:"first.html"
},
{
Name:"tab2",
id:2,
content:"SecondTab",
title:"Dynamic-2",
templateUrl:"second.html"
},
{
Name:"tab3",
id:3,
content:"ThirdTab",
title:"Dynamic-3",
templateUrl:"third.html"
}
];
}]);
html file
<ul class="nav nav-tabs">
<li ng-repeat="l in list" >
<a href="#firsttab" ng-click="tab = 1" data-toggle="tab" >
{{l.title}} </a>
<div class="tab-content" >
<div id="firsttab" ng-click="tab = 1" ng-
show="tab===1">
Id: {{l.id}} <br>
Name: {{l.Name}} <br>
Content: {{l.content}} <br>
TemplateFile: <div ng-include="l.templateUrl"></div>
</div>
</ul>
</div>
</li>

Answer 1

model.js(Just change the code of this file with the code I have written below. It will give you desired result)
We have to provide delay to broadcast to make it work.
define(['jquery','ocLazyLoad','cssinjector'], function() {
var app=angular.module('App', ['angular.css.injector','oc.lazyLoad']);
app.controller('mycontroller', ['$scope','$ocLazyLoad','cssInjector','$rootScope','$timeout',
function($scope,$ocLazyLoad,cssInjector,$rootScope,$timeout) {
alert("modal-loaded");
$ocLazyLoad.load("http://localhost:8080/tabs/js/modal1.js")
.then(function(){
alert("modal1 loaded");
$scope.view="http://localhost:8080/tabs/view.html";
cssInjector.add("http://localhost:8080/tabs/style.css");
});
// ARRAY
var items=[
{
Name:"tab1",
id:1
},
{
Name:"tab2",
id:2
},
{
Name:"tab3",
id:3
}
];
$timeout(function(){
$rootScope.$broadcast('itmObj', items);
},0);
}]);
angular.element(function() {
angular.bootstrap(document, ['App']);
});
});

Answer 2

If you broadcast like this in parent controller
$scope.$broadcast('itmObj',{ itemsArray: items});
Then you can use the on-catch in child controller like
and you eill have the items array in args.itemsArray
$scope.$on('itmObj', function (event, args) {
var x = args.itemsArray; // args.itemsArray is your items from parentcontroller
});

Answer 3

Trying to add a promise on lazyloading the modalController and modal view will look like this
Modal.js
define(['jquery','ocLazyLoad','cssinjector'], function() {
var app=angular.module('App', ['angular.css.injector','oc.lazyLoad']);
app.controller('mycontroller', ['$scope','$ocLazyLoad','cssInjector',
function($scope,$ocLazyLoad,cssInjector) {
alert("modal-loaded");
// ARRAY
var items=[{
Name:"tab1",
id:1
},{
Name:"tab2",
id:2
},{
Name:"tab3",
id:3
}];
var lazyLoadModal1 = function(){
var deferred = $q.defer();
$ocLazyLoad.load("http://localhost:8080/tabs/js/modal1.js")
.then(function(){
alert("modal1 loaded");
$scope.view="http://localhost:8080/tabs/view.html";
cssInjector.add("http://localhost:8080/tabs/style.css");
deferred.resolve();
},function(){
deferred.reject();
});
return deferred.promise;
};
var init = (function(){
lazyLoadModal1().then(function(){
$scope.$broadcast('itmObj', {item:items});
});
})();
}]);
View.html
<div ng-controller="modalcontroller">
<div ng-repeat="vm in itemsArray">
<p>{{vm.Name}}</p>
<p>{{vm.id}}</p>
</div>
</div>
Modal1.js
angular.module('App', ['angular.css.injector','oc.lazyLoad'])
.controller("modalcontroller", ['$scope','$ocLazyLoad','cssInjector',
function($scope,$ocLazyLoad,cssInjector){
alert("In modal Controller");
$scope.$on("broadcast-started", function (event, data){
$scope.itemsArray=data.item;
console.log($scope.itemsArray);
});
}]);