UI Bootstrap dropdown is adding HTML I didn't write

Question

I'm having issues to understand why UI Bootstrap is adding HTML I didn't write inside the dropdown.

Here is a JSFiddle showing the issue. You should see three <a> tags in the dropdown that are not written in the HTML.

HTML:

<div ng-app="app" ng-controller="ctrl">
    <div class="dropdown">
        <a id="new" class="actionButton dropdown-toggle">
            New<span class="right-caret"></span>
            <ul class="dropdown-menu drop-right">
                <li ng-repeat="action in newActions">
                    <a ng-click="action.run()">{{action .name}}</a>
                </li>
            </ul>
        </a>
    </div>
</div>

JS:

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

app.controller("ctrl", function($scope) {
    $scope.newActions = [{
            name: "File",
            run: createFile
        }, {
            name: "Folder",
            run: createFolder
    }];

    $scope.status = {
        isopen: false
    };

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

    function createFile() {
    }

    function createFolder() {
    }
});

Am I doing something wrong ?

Note: I'm using ui-bootstrap-tpls-0.11.0.min.js.

Answer 1

You are doing something wrong indeed. You need to close the first a tag:

<div ng-app="app" ng-controller="ctrl">
    <div class="dropdown">
        <a id="new" class="actionButton dropdown-toggle">
            New<span class="right-caret"></span>
        </a>
        <ul class="dropdown-menu drop-right">
             <li ng-repeat="action in newActions">
                 <a ng-click="action.run()">{{action .name}}</a>
             </li>
        </ul>
    </div>
</div>

Answer 2

Some HTML issue

<div ng-app="app" ng-controller="ctrl">
        <div class="dropdown">
            <a id="new" class="actionButton dropdown-toggle">
                New<span class="right-caret"></span>
             </a> // Issue here - Close the "a" tag here
                <ul class="dropdown-menu drop-right">
                    <li ng-repeat="action in newActions">
                        <a ng-click="action.run()">{{action .name}}</a>
                    </li>
                </ul>
        </div>
    </div>