ng-change isn't firing on select in Foundation for Apps

Question

On a Foundation-for-Apps web application, I want to trigger a function in my controller when a select value is changed.

I did the following in my template:

---
name: meeting-rooms
url: /meeting-rooms
controller: MeetingRoomsCtrl
animationIn: slideInRight
animationOut: slideOutLeft
---

<div class="custom-tabs" zf-tabs="">
    <div class="custom-tabs-item" zf-tab="" title="Location" data-options="one_up: false">
        <form class="form">
            <select id="selectLocation" class="select form-place-select" ng-model="selectLocation" ng-change="selectLocationChanged()">
                <option value="">Select a place</option>
                <option value="New York">New York</option>
            </select>   
        </form>
    </div>
</div>

And my controller:

(function() {
    'use strict';

    angular.module('application').controller('MeetingRoomsCtrl', ['$scope',
        function($scope, $state, $window, foundation, ModalFactory, NotificationFactory) {
            $scope.selectLocationChanged = function() {
                console.log($scope.selectLocation.name);
            };
        }
    ]);
})();

Which is supposed to work: the ng-model is provided, the function selectLocationChanged exist in the scope (I can use other variables set in the controller in the same template), and the syntax ng-model="selectLocation" ng-change="selectLocationChanged()" is correct. I don't have any error message in the console, the change event is just not fired.

Is there any reason why this is not working? Maybe something specific with Foundation For Apps?

Answer 1

Change your code to this, forgot to include controller in HTML page

<form class="form" ng-controller="MeetingRoomsCtrl">
     <div  >
      <select id="selectLocation" class="select form-place-select" ng-model="selectLocation" ng-change="selectLocationChanged(selectLocation)">
           <option value="" disabled="disabled">Select a place</option>
           <option value="New York">New York</option>
     </select>
    </div>
   </form>