Angular-ui: Alternate controller syntax for tabs

Question

I'm trying to add angular-ui bootstrap tabs to a simple app, and am having trouble with different versions of controller definitions / scope (i think)

var app = angular.module('plunker', ['ui.bootstrap']);

// works as intended
var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2', disabled: true }
  ];

  $scope.alertMe = function() {
    setTimeout(function() {
      alert('You\'ve selected the alert tab!');
    });
  };
};

// tabs are selectable, but blank
app.controller('ModifiedCtrl', function () {
  this.tabs = [
    { title:'Dynamic Title 1', content:'Dynamic content 1' },
    { title:'Dynamic Title 2', content:'Dynamic content 2' }
  ];
  this.test = 'inital test content';
});

This is my fork of the plunkr in the documentation: http://plnkr.co/edit/UekWz89tCzZnRSBnV2cs?p=preview

I've messed around with this, but I'm clearly missing something… any suggestions? TIA

This SO post was helpful, but I haven't got it working yet… Alternative syntax for angular.module.controller

Answer 1

The problem is in your markup.

You're doing ng-controller="ModifiedCtrl as tabs" then ng-repeat="tab in tabs . So, tabs is actually your controller. You want ng-repeat="tab in tabs.tabs" for it to work.