ng-click does not fire javascript global function

Question

I'm new to AngularJS, and I've put an ng-click on a radio button generated by ng-repeat, and the click event refuses to fire. If I use a simple onclick, that does work though.

This works, and I see the alert:

<div class="span2 left-justify"
        ng-repeat="choice in physicalmode_choices">
    <input type="radio"
            name="physical_layer"
            value="{{ choice.private }}"
            onclick="alert('foo')"
            required
            ng-model="$parent.networkoptions.physicalmode" />
            &nbsp;<span ng-bind="choice.public"></span>
</div>

But this does not:

<div class="span2 left-justify"
        ng-repeat="choice in physicalmode_choices">
    <input type="radio"
            name="physical_layer"
            value="{{ choice.private }}"
            ng-click="alert('foo')"
            required
            ng-model="$parent.networkoptions.physicalmode" />
            &nbsp;<span ng-bind="choice.public"></span>
</div>

Can I not do this with an ng-click? Or am I misunderstanding what an "expression" is?

Thanks, Mike

Answer 1

To clarify DerekR's answer.

When angular sees

ng-click='alert("test")'

it looks for

$scope.alert

which is likely to be undefined.

You need to provide a proxy method on the scope, or possibly even rootscope.

For example:

$rootScope.log = function(variable) {
    console.log(variable);
};
$rootScope.alert = function(text) {
    alert(text);
};

See: http://deansofer.com/posts/view/14/AngularJs-Tips-and-Tricks-UPDATED#scopemethods