无法在嵌套的zf-tabs中访问控制器属性

Question

我有一个简单的AngularJS控制器：

(function () {
    'use strict';
    angular
        .module('app')
        .controller('MainController', MainController);

    function MainController() {
        var vm = this;
        vm.countries = ["México", "Brasil", "Chile"];
        vm.cities = {
            Mexico: ["Ciudad de México", "Guadalajara", "Monterrey"],
            Brasil: ["Sao Paulo", "Rio de Janeiro", "Porto Alegre"],
            Chile: ["Santiago de Chile", "Valparaiso", "Viña del Mar"]
        };
    }
})();

将Zurb Foundation用于应用程序我想在选项卡中嵌入带有下一个HTML标记的选项卡：

<div ng-controller="MainController">
    <div zf-tabs="">
        <div zf-tab="" title="{{country}}" ng-repeat="country in vm.countries">
            <!-- Here I can print the array of countries see all the properties of the country inside the tab -->
            {{$parent.vm.countries}}

            <div zf-tabs="">
                <!-- Here I can't access the scope of my controller see all the cities for each country -->
                <div zf-tab="" title="{{city}}" ng-repeat="city in $parent.vm.cities[$parent.country]">
                    {{city.population}}
                </div>
                <div zf-tab="" title="Test tab">
                    <!-- Here I can't print the array of countries -->
                    {{$parent.$parent.vm.countries}
                </div>
            </div
        </div>
    </div>
</div>

但似乎我无法从第二个zf-tabs中访问控制器Scope。

关于如何使用它的任何想法？