angular-translate not working in a button that has another component

Question

angular-translate works fine for several p's, h's, and labels using the format

<p translate>something</p>

Its great. But I can not get it working on buttons that have another Angular component on that button, specifically angular-dropdowns. In fact, when I put translate at the end of the > , it breaks the entire page on page load and no Javascript works. In the Console, I get Error: [$compile:multidir] http://errors.angularjs.org/1.2.20/$compile/multidir (etc., etc.)

The HTML is

<div id="leftOfMap" class="floatingSection" data-ng-controller="languageController">
    <ul>
        <li class="leftOfMapItem"><button id="languageButton" dropdown-menu="ddMenuOptions" dropdown-model="ddMenuSelected" class="btn-menu">Language</button></li>
        <li class="leftOfMapItem" translate>BIKE PATHS</li>
    </ul>
</div>

The Angular controller for that button is

residenceApp.controller('languageController', [ '$scope', 'changeLanguage',
function( $scope, changeLanguage ) {
var languageChoices = [
    {"text": "English", "val": "en"},
    {"text": "Espanol", "val": "es"}
];
$scope.ddMenuOptions = languageChoices;
$scope.ddMenuSelected = {};
$scope.$watch('ddMenuSelected', function(newVal) {
    if (newVal && newVal.text) {
        changeLanguage(newVal.val); //eg., changeLanguage(es);
        //changeLanguage() is the name of a factory service
    }
}, true);
}]);

The dropdown button works, selects languages and translation occurs. myApp has the config stuff that is in angular-translate's docs - $translateProvider.translations() kind of stuff. Again, the problem is that when the translate attribute/instruction is on the button, it breaks the whole page on page load. I tried bringing $translate into the above controller, but could not get it working. What has to change?

Answer 1

Are you using an older version of Angular Translate than the current version on Github? Because if not, that's not the right syntax for it. Use one of the following:

<li class="leftOfMapItem" translate="BIKE PATHS"></li>

or:

<li class="leftOfMapItem">{{ 'BIKE PATHS' | translate }}</li>

Note the quotes around the translation key in the expression.