angular bootstrap dropdown error: d.init is not a function

Question

I am trying to use UI Bootstrap dropdown directive for angular (https://angular-ui.github.io/bootstrap/#/dropdown).

I am copying the example just as is on the page (for a single button), and I get this error:

TypeError: d.init is not a function

Here's the markup:

<div class="album-selector col-sm-12" ng-controller="DropdownController">
  <div class="btn-group" dropdown is-open="status.isopen">
    <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
      Button dropdown <span class="caret"></span>
    </button>
  </div>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

And this is the controller:

angular.module('DropdownCtrl', ['ui.bootstrap']).controller('DropdownController', function ($scope) {

  $scope.items = [
    'The first choice!',
    'And another choice for you.',
    'but wait! A third!'
  ];

  $scope.status = {
    isopen: false
  };

  $scope.toggled = function(open) {
    $log.log('Dropdown is now: ', open);
  };

  $scope.toggleDropdown = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.status.isopen = !$scope.status.isopen;
  };
});

NOTE: It seems that the 'd.init' error happens just by writing 'dropdown' on the div (or anywhere on the document), removing that directive makes the error go away but the dropdown is still not working.

NOTE2: I am already using other UI Bootstrap directives on the same page I get this error, like Carousel, Buttons, Modal, etc. This happens only with the dropdown directive.

Answer 1

You have a conflict in your controller name.

Angular-UI uses 'DropdownController' as one of its internal controllers.

Change the Controller name to something else and it should work. Generally it's good practice to have some sort of convention to your controller naming. For example if you module was called 'Dropdown' you might add 'dd' to the start of every controllers name in it.