How to add dynamic contents to tab set using angular and ui bootstrap

Problem

Very new to angular and ui bootstrap. I have a tab set as below:

<head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title> Tabs</title>
 <link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form id="formTabs" runat="server">
<div>
        <div ng-controller="TabsDemoCtrl">
          <hr />
          <tabset align="left">
            <tab heading="Account">Account content</tab>
            <tab heading="Policy">Policy content</tab>
            <tab heading="LoB">LOB content</tab>
            <tab heading="Coverage">Coverage content</tab>
             <tab heading="Detailed Loss">Detailed Loss</tab>
          </tabset>
        </div>
</div>
</form>

The javascript as :

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {

});

Now I want to enhance the above example , so that the contents of Tab are dynamic. I need to get data by invoking web service. say when I click Account Tab, function LoadProducts is called and the data is loaded.

I would change the javascript to include the function LoadProducts as below:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {

        $scope.LoadProducts = function() {
        $scope.loading = true;
                var PnrUrlLoadProducts = PNRfolder +   
       '/Portal/WebServices/PNRServices.asmx/getPNRProducts';
       $http(
       {
        method: 'POST',
        //url: '/Portal/WebServices/PNRServices.asmx/getPNRProducts',
        url: PnrUrlLoadProducts,
        data: { 'businessUnit': $scope.businessUnit.desc },
        headers: { 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' },
        cache: $templateCache
       }).
        success(function(data, status, headers, config) {
           ...
       ...

        }).

Now I do not know how to call the Loadproducts on click of the tab "Accounts". Please can some one help.

I changed the code to include the fuction on ng-click. This does not work . Please see below:

<html ng-app="ui.bootstrap.demo">
  <head>
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title> Tabs</title>
 <link href="css/bootstrap.css" rel="stylesheet"/>
 </head>
  <body>
  <form id="formTabs" runat="server">
  <div>
        <div ng-controller="TabsDemoCtrl">
          <hr />
          <tabset align="left">
            <tab heading="Account" ng-click ="ShowTest">Account content</tab>
            <tab heading="Policy">Policy content</tab>
            <tab heading="LoB">LOB content</tab>
            <tab heading="Coverage">Coverage content</tab>
             <tab heading="Detailed Loss">Detailed Loss</tab>
          </tabset>
        </div>
   </div>
  </form>
 </body>
</html>

javascript:

   angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope) {
    $scope.ShowTest = function() {
    $scope.loading = true;
    alert("in accounts");
}

});

Nothing happens when I click Account tab. It still shows static text.

******** Revisited my code *************** I did change my code as below, and still on click of accounts tab the function ShowTest is not called.

The HTML is :

 <html ng-app="ui.bootstrap.testData">
 <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <title> Tabs</title>
  <link href="css/bs/bootstrap.css" rel="stylesheet"/>
  <style type ="text/css" >
    .SpanStyle
    {
      text-align: center;
      color:blue;
    }
   </style> 
</head>
<body>
 <form id="formTabs" runat="server">
 <div>
        <div ng-controller="TabsDataCtrl">
          <hr />
          <tabset align="left">
            <tab heading="Account" ng-click ="ShowTest">Account content
            <div id ="TestAcccount"> <span class="SpanStyle">Test</span></div>
            </tab>
            <tab heading="Policy">Policy content</tab>
            <tab heading="LoB">LOB content</tab>
            <tab heading="Coverage">Coverage content</tab>
             <tab heading="Detailed Loss">Detailed Loss</tab>
          </tabset>
        </div>
  </div>
  </form>
</body>
</html>

<script src="jsNew/angular.js" type ="text/javascript"></script>

<script type ="text/javascript" >
   $(window).load(function() {
       $("#TestAcccount").hide();
   });


</script>

The javascript is as :

  angular.module('ui.bootstrap.testData', ['ui.bootstrap']);
  angular.module('ui.bootstrap.testData').controller('TabsDataCtrl', function($scope) {
   alert("module");
   $scope.ShowTest = function() {
    alert("scope");
    $scope.loading = true;
    var PnrUrlBU = PNRfolder + '/Portal/WebServices/PNRServices.asmx/getPNRBusinessUnits';
    $http({
        method: 'POST',
        //url: '/Portal/WebServices/PNRServices.asmx/getPNRBusinessUnits',
        url: PnrUrlBU,
        data: {},
        headers: { 'Content-Type': 'application/json; charset=uf-8', 'dataType': 'json' }

    }).
        success(function(data, status, headers, config) {
            $scope.loading = false;
            //$scope.businessUnits = data.d;
            //$("#ddBusinessUnits").removeAttr("disabled");

            // $scope.GetPNRHistory();
            $("#TestAcccount span.SpanStyle").text("The business unit:" + data.d);
            $scope("#TestAcccount").show();
        }).
        error(function(data, status) {
            $scope.loading = false;
            alert("Request Failed GetBusinessUnits");
        });
  }
});

The first alert "module " is displayed but the second alert "scope" is not displayed. This implies the function ShowTest is never fired.

Problem courtesy of: resthere

Solution

You are mixing jQuery and Angular up in a way that will lead you into problems. Angular has another way of doing showing and hiding and you should use that throughout. I've played around with your Plunkr but you'll now need to test it as the $http call needs a full URL to POST to, but I was able to get the error alert to work so success should fire too under the rtight circumstances

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 

angular.module('ui.bootstrap.demo')
.controller('TabsDemoCtrl', function($scope) {

    $scope.LoadProducts = function() {
        $scope.loading = true;
        var PnrUrlLoadProducts = PNRfolder + '/Portal/WebServices/PNRServices.asmx/getPNRProducts';
        $http(
        {
            method: 'POST',    // probably should be a GET
            url: PnrUrlLoadProducts,
            data: { 'businessUnit': $scope.businessUnit.desc },
            headers: { 'Content-Type': 'application/json; charset=utf-8', 'dataType': 'json' },
            cache: $templateCache
        }).
        success(function(data, status, headers, config) {
            $scope.loading = false;
            alert("in accounts");
            ...
        })

    }
})

See updated plnkr for all the details.

Solution courtesy of: Simon H

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.