Scoping Issue

HTML

<script src="http://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.min.js"></script>
<div ng-app ng-controller="MainCtrl">
  <div ng-controller="AssetCtrl">
      <span ng-repeat="folder in folders">     
         <li class="folder" ng-click="setCurrentFolder(folder)">
            <span class="{{cssActiveIf(folder,currentFolder)}}">
               <a href="javascript:void(0)">{{folder.name}}</a>
            </span>
          </li>
      </span>
  </div>
</div>

CSS

li span.active{background-color:#de167d; text-decoration:none;  color:#FFF;}

JavaScript

function MainCtrl($scope) {
    $scope.name="a";
    $scope.folders = [{name: "folder1"},{name: "folder2"}];
}

function AssetCtrl($scope) {
  $scope.currentFolder = $scope.folders[0]

  $scope.setCurrentFolder = function (folder) {
    $scope.currentFolder = folder;
  };

  $scope.cssActiveIf = function (item, current) {
    return (current === item) ? "active" : "";
  };
};