Directive to display icons #2 (Bob)

Hover over a div or span with text, and display a list of icons to provide further options. 1) mouseenter - append icons 2) mouseleave - remove icons

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<div ng-app="app">
    <div data-ng-controller="NavBarCtrl as nav">
        <ul style="list-style-type:none;">
            <li><span ng-click="nav.onItemSelect(this)">Item A <data-toggle-me></data-toggle-me> </span></li>
            <li><span ng-click="nav.onItemSelect(this)">Item B <data-toggle-me></data-toggle-me> </span></li>
            <li><span ng-click="nav.onItemSelect(this)">Item C <data-toggle-me></data-toggle-me> </span></li>
        </ul>
    </div>
</div>

CSS

span {
    display: inline;
}

.add::after {
    display: inline;
    margin-left: 5px;
    content: url(http://umcmsuncoast.org/assets/components/discuss/themes/umcm/images/buttons/10x10/plus.gif);
}

JavaScript

// FYI: this iteration of the directive originates from another fiddle where the user will mouseover to show the icons.
//      That fiddle is here: http://jsfiddle.net/robertmazzo/pqomgywt/

// Problem description: Write a directive which will display a list of icons to the right of the list item on the CLICK event.
//                      Each icon will have an ng-click event on it.
//                      Once I click on a different item, the previous icons shown will now be hidden. The new icons will be shown.
//
var app = angular.module('app',
    [
    ]);

app.directive('toggleMe', ['$compile', function ($compile) {
    return {
        restrict: 'AE',
        transclude: true,
        // How do I show these icons when a user clicks on 'Item A' , 'Item B' , or 'Item C' ???
        template:
                '<a title="add report here" ng-click="nav.addBelow(nav.selectedItem)"><i class="fa fa-plus"></i></a>&nbsp;&nbsp;',
        link: function (scope, elem, attrs) {                        
            var icons = elem.find("#myIcons");
            elem.on('click', function (e) {
                $('.reptIcons').css('display', 'none');
                icons.css("display", "inline");
                icons.css("margin-left", "5px");
            });        
        }
    }
}]).
controller('NavBarCtrl',['$scope', function($scope){
    var nav = this;
    nav.onItemSelect = function(e){
        nav.displayIcons = true;             
        console.log(nav.displayIcons);
    }
    nav.addAfter = function (item) {
        alert('You will now create a new folder to the tree.');
    }
    nav.addBelow = function () {
        alert('You will now create a new report below this folder.');
    }
    nav.remove = function (item) {
         alert('Removed item from tree!');
    }
}]);