如何动态地改变当前菜单元素的标题(指令中的模板)

我正在考虑如何解决这个问题。让我们开始:

我的网站有一个菜单栏(或导航栏)。

我从JSON文件中创建它，我使用AngularJS指令和模板来创建它:

{
    "mainmenu": [
        {
            "id": "bananas",
            "title": "Bananas",
            "href": "#/bananas",
            "li-class": "menu-element"
        },
        {
            "id": "apples",
            "title": "Apples",
            "li-class": "dropdown"
            "submenu": [
                {
                    "id": "apple-lot",
                    "title": "Apples lots",
                    "href": "#/apples/lot"                  
                },
                {
                    "id": "apple-series",
                    "title": "Apples series",
                    "href": "#/apples/series"
                }               
            ]
        },
        {
            "id": "cherries",
            "title": "Cherries",
            "href": "#/cherries",
            "li-class": "menu-element"
        }
    ]
}

我的AngularJS指令与模板:

angular.module('dynamic-menu').directive('menuTemplate', function () {
    return {
        restrict: 'E',
        template: "<nav class='"navbar navbar-inverse navbar-fixed-top'" role='"navigation'" id='"nav-bar'" style='"margin-bottom: 0.5%'">"
                        + "<div class='"container-fluid'">"
                            + "<div class='"navbar-header'">"
                                + "<span class='"navbar-brand'">TITLE</span>"
                            + "</div>"
                            + "<div class='"collapse navbar-collapse'">"
                                + "<span class='"navbar-brand'">"
                                        + "<ul class='"nav navbar-nav'">"
                                            + "<li ng-repeat='"item in mainmenu'">"
                                                + "<a href='"{{item.href}}'">{{item.title}}</a>"
                                            +"</li>"
                                        +"</ul> <!-- /.nav navbar-nav -->"
                                    +"</span> <!-- /.navbar-brand -->"
                                +"</div> <!-- /.navbar-collapse-->"
                            +"</div> <!-- /.container-fluid-->"
                        +"</nav>"
           };
}]);

和AngularJS控制器:

angular.module('dynamic-menu').controller('dynamicMenuCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('MenuItems.json').success(function (data) {
        $scope.mainmenu = data;
    });

问题是-如何动态地改变标题?

我的AngularJS指令中的这一行:

+ "<span class='"navbar-brand'">TITLE</span>"

也许我可以添加一些东西到我的JSON文件，并以某种方式检查是否有一个类分配的活动菜单元素?(例如<li class="menu-item-active">)或者怎么做?

这是Plunker -有一个Title，我想在我的模板中动态更改

http://plnkr.co/edit/U1xG2E4ys7SGz7WxBtvq?p =

EDIT: What I want to achieve:

在main page上我想有标题fruits，当我在子菜单Bananas上我想显示标题Bananas