Q:

Angular HTML list on select put the selected value into a app wide variable and a span

I have a SPA that have the following code
<ul id = "vers"> <span>My App</span>
    <li class="sub">
        <a href="#">Version</a>
        <ul>
            <li class="sub">
                <a href="#">V2</a>
                <ul ng-controller="V2Ctrl">
                    <li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</a></li>
                </ul>
            </li>
            <li class="sub">
                <a href="#">V3</a>
                <ul ng-controller="V3Ctrl">
                    <li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

I would like to put the selected value into a <span> to display it and also store the value to a app-wide variable so that this value can be used as input for other things.
How can I do it in AngualrJs?
Update:
I am looking for the effects similar to the following:
var vers = "";
var link = document.getElementById("vers");
AttachEvent(link, "click", EventHandler);

function AttachEvent(element, type, handler) {
    if (element.addEventListener) element.addEventListener(type, handler, false);
    else element.attachEvent("on"+type, handler);
}

function EventHandler(e) {
    alert(e.target.innerHTML);
  vers = e.target.innerHTML;
}

The above code actually works without a controller on the top level list.
So do I need a controller for this? If yes, When is the controller invoked?
Hope that make my question clearer.

A:

Is this what you are looking for?
HTML
<ul ng-app="app" ng-controller="appController"> <span>{{value}}</span>
<li class="sub">
    <a href="#">Version</a>
    <ul>
        <li class="sub">
            <a href="#">V2</a>
            <ul>
                <li ng-repeat = "v2 in fruits"><a href="javascript:void(0)" ng-click="select(v2)">{{v2}}</a></li>
            </ul>
        </li>
        <li class="sub">
            <a href="#">V3</a>
            <ul>
                <li ng-repeat = "v3 in countries"><a href="javascript:void(0)" ng-click="select(v3)">{{v3}}</a></li>
            </ul>
        </li>
    </ul>
</li></ul>

JS
var App = angular.module('app', []);
App.controller('appController', function($scope, fruits, countries){
$scope.value="";
$scope.v2 = 'Apple'
$scope.v3 = 'Windows'
$scope.fruits = fruits;
$scope.countries = countries;

$scope.select = function(val){
  $scope.value = val;
}
});
App.factory('fruits', function(){
  return ['apple', 'banana', 'mango']
});
App.factory('countries', function(){
  return ['Dominican Republic', 'Panama', 'Argentina']
});

Check this example working here...

