Detect click inside SVG <path> using AngularJS

Question

This question shows how to do it with Jquery, but I can't get it to work in AagularJs.

I have an SVG image containing several areas delineated by <path>s, and want ti detect which one is clicked.

The paths are declared as

   <path id="inner" fill="transparent"  ng-click='innerRoomClicked'
        stroke="black" stroke-width="1"
        d="M 132.00,249.00
           C 132.00,249.00 132.00,348.00 132.00,348.00
             132.00,348.00 180.00,348.00 180.00,348.00

etc

and

  <path id="A B C"
        fill="transparent"  ng-click='innerRoomClicked' stroke="black" stroke-width="1"
        d="M 171.06,307.00
           C 171.06,307.00 167.06,307.00 167.06,307.00
             167.06,307.00 169.00,301.94 169.00,301.94
             169.00,301.94 171.06,307.00 171.06,307.00 Z

etc

and, in the controller,

$scope.outerRoomClicked = function()
{
    alert('outerRoomClicked');
}

$scope.innerRoomClicked = function()
{
    alert('innerRoomClicked');
}

BUT, neither of those are called. What am I doing wrongly?

Answer 1

Change ng-click='innerRoomClicked' to ng-click='innerRoomClicked()'