Define functions before assigning them to object.Assign them as
$scope.menuList = [
{ mode: $scope.stun, value : 'Stun' },
{ mode: $scope.disinegrate ,value : 'Disinegrate' },
{ mode: $scope.erase, value : 'Erase' },
];
and use them in html as
<ul>
<li data-ng-repeat="menu in menuList"><a href="" data-ng-click="menu.mode()">{{ menu.value }}</a></li>
</ul>
View:
<div data-ng-controller="DeathRayController">
<button data-ng-click="toggleMenu()">Toggle Menu</button>
<ul ng-show="menuState.show">
<li data-ng-repeat="menu in menuList"><a href="" data-ng-click="menu.mode()">{{ menu.value }}</a></li>
</ul>
</div>
controller:
var showHide = angular.module('showHide', []);
showHide.controller('DeathRayController', function ($scope) {
// the idea is to display this on the <a ng-click="menu.mode()">
$scope.stun = function() {
alert('Snorlax is stunned!');
};
$scope.disinegrate = function() {
alert('Charizard used Disinegrate!');
};
$scope.erase = function() {
alert('erased Sleep skill');
};
$scope.menuList = [
{ mode: $scope.stun, value : 'Stun' },
{ mode: $scope.disinegrate ,value : 'Disinegrate' },
{ mode: $scope.erase, value : 'Erase' },
];
$scope.menuState = { show: false };
$scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show;
};
});
Fiddle: http://jsfiddle.net/rVCV2/1/