Dropdown stops working when used inside a directive

[samuelmolinski]

This may be only a symptom of something else. I created a directive to control the header and used the top-bar directive inside it, but when I run it, the drop menu stops working. Can You help me find what I am missing from making this work properly?

The directive:

angular.module('app')
    .directive('fixedheader', function () {
        return {
            restrict: 'E',
            templateUrl: 'views/fixedheader.html',
            controller: 'FixedHeaderCtrl',
            replace: true
        };
    });

the view is basic:

<header id="fixedHeader">
    <top-bar class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">My Site</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
        </ul>

        <top-bar-section class="top-bar-section">
            <ul class="right">
                <li class="active"><a href="#">Right Button Active</a></li>
                <li class="has-dropdown">
                    <a href="#">Right Button Dropdown</a>
                    <ul class="dropdown">
                        <li><a href="#">First link in dropdown</a></li>
                        <li class="active"><a href="#">Active link in dropdown</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="right">
                <li class="active"><a ng-href="#/">Home</a></li>
                <li><a ng-href="#/about">About</a></li>
                <li class="has-dropdown">
                    <a href="#">Manager</a>
                    <ul class="dropdown">
                        <li ng-repeat="manager in managers">
                            <a ng-href="#/manager/{{manager.name}}">{{manager.title}}</a>
                        </li>
                        <li><a ng-href="#/about"></a></li>
                        <li><a href="#">First link in dropdown</a></li>
                        <li class="active"><a href="#">Active link in dropdown</a></li>
                    </ul>
                </li>
            </ul>

            <ul class="left">
                <li ng-show="(auth != true)"><a ng-click="openLogin();">Sign In</a></li>
                <li ng-show="(auth == true)">
                    <a href="#/" ng-click="logout();">{{user.FirstName + ' ' + user.LastName}} (sign off)</a>
                </li>
            </ul>
        </top-bar-section>
    </top-bar>
</header>

Thanks for you help

[jbrowning]

Please create a Plunk demonstrating your issue.