Angular JS - Nested JSON Driving a Two Level Navigation - How to Alter scope from directive?

Question

I'm new to Angular but enjoying getting to know it! I'm having no problem populating data but I'm stuck on this navigational problem.

I have a sidebar divided into two navigation s. Both are reading from nested JSON of 'areas' and 'reports'. The idea is that the currently selected/clicked item in the left hand list will populate the elements in the right hand list, according to its children in the JSON.

I've got the initial population working fine. It reads the 'areas' and assigns the active area, which displays the reports. I then have a directive which applies css classes on the click event, but how can I get it to also alter the active area?

I'm currently doing scope.activeArea = scope.areas[1];, but this does not work. The index is just there for development; that will be replaced by the index of the clicked element.

My HTML:

<div id="reports-subnav" ng-controller="reportAreasController">
    <ul class="subnav-areas" >
        <li ng-repeat="x in areas">
            <a class="subnav-area-button" href="#" my-cool-directive>
                <i class="{{ x.iconClass }}"></i>
            </a>
        </li>        
    </ul>


    <ul id="nav-subsection" class="subnav-reports">

        <li ng-repeat="r in activeArea.reports" id="{{ r.action }}" role="presentation"><a href="<?php echo SITE_ADDR; ?>/{{ r.controller }}/{{ r.action }}"><span class="{{ r.iconClass }}"></span> {{ r.name }}</a></li>

    </ul>

</div>

And Javascript:

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

app.controller("reportAreasController", ['$scope','$http', function($scope, $http) { 

    $http.get('<?php echo SITE_ADDR; ?>/data/reportAreas.json').success (function(data){ 

        $scope.areas = data.areas;
        $scope.activeArea = $scope.areas[0];

    });

}] );

app.directive("myCoolDirective", function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            $(elem).click(function() {
                //var target = $(elem).next(".panel-collapse");
                //target.hasClass("collapse") ? target.collapse("show") : target.collapse("hide");
                $('.subnav-areas li').removeClass('active');
                $(this).parent().addClass('active');
                scope.activeArea = scope.areas[1];
            });
        }
    }
});

Thanks!

Edit

Thanks to charlietfl's guidance my code now looks like this:

HTML

<div id="reports-subnav" ng-controller="reportAreasController">
    <ul class="subnav-areas" >
        <li class="subnav-area" ng-repeat="x in areas">
            <a class="subnav-area-button" href="#" ng-click="showReports($event, x.id)">
                <i class="{{ x.iconClass }}"></i>
            </a>
        </li>        
    </ul>


    <ul id="nav-subsection" class="subnav-reports">

        <li ng-repeat="r in activeArea.reports" id="{{ r.action }}" role="presentation"><a href="<?php echo SITE_ADDR; ?>/{{ r.controller }}/{{ r.action }}"><span class="{{ r.iconClass }}"></span> {{ r.name }}</a></li>

    </ul>

</div>

JS

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

app.controller("reportAreasController", ['$scope','$http', function($scope, $http) { 

    $http.get('<?php echo SITE_ADDR; ?>/data/reportAreas.json').success (function(data){ 

        $scope.areas = data.areas;
        $scope.activeArea = $scope.areas[0];

        $scope.showReports = function($event, index) {
            $scope.activeArea = $scope.areas[index -1];
            var theLi = angular.element($event.currentTarget).parent();
            theLi.parent().find('li').removeClass('active');
            theLi.addClass('active');
        }

    });

}] );

Edit 2

HTML

<div id="reports-subnav" ng-controller="reportAreasController">
    <ul class="subnav-areas" >
        <li class="subnav-area" ng-repeat="x in areas" ng-class="{active: x==activeArea}">
            <a class="subnav-area-button" href="#" ng-click="showReports($event, x)">
                <i class="{{ x.iconClass }}"></i>
            </a>
        </li>        
    </ul>


    <ul id="nav-subsection" class="subnav-reports">

        <li ng-repeat="r in activeArea.reports" id="{{ r.action }}" role="presentation"><a href="<?php echo SITE_ADDR; ?>/{{ r.controller }}/{{ r.action }}"><span class="{{ r.iconClass }}"></span> {{ r.name }}</a></li>

    </ul>

</div>

JS

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

app.controller("reportAreasController", ['$scope','$http', function($scope, $http) { 

    $http.get('<?php echo SITE_ADDR; ?>/data/reportAreas.json').success (function(data){ 

        $scope.areas = data.areas;
        $scope.activeArea = $scope.areas[0];

        $scope.showReports = function($event, item) {
            $scope.activeArea = item;
        }

    });

}] );

Thanks again charlietfl!