AngularJS: Shows reference error : goToFormDashboard not defined in scope

Question

I am trying to call a function on onchange event but getting reference error everytime for that function my fromtend code is this:

        <label class="item item-input item-select" ng-controller="manageTeam">
            <div class="input-label">
                Select Form
            </div>
            <select onchange="goToFormDashboard($(this).children(':selected').val())" ng-model="Formname" ng-options="f.Formname for f in forms track by f.Formid"></select>
        </label>

My controller is this:

.controller('manageTeam', function($scope, $ionicLoading, $http, $timeout, $rootScope, $state) {
    $scope.goToFormDashboard = function (formId) {
        $ionicLoading.show({template: 'Loading'});
        $timeout(function () {
            $ionicLoading.hide();
        }, 1500);
        var formID = formId;
        $scope.form.length = 0;
        .....

is something missing in that?

Answer 1

You need to use ng-change directive & no need to use jquery here you can get the value inside ng-model, Formname contains whole object you can pass form id only by doing Formname.Formid to goToFormDashboard method.

Markup

<select ng-change="goToFormDashboard(Formname.Formid)" ng-model="Formname" 
ng-options="f.Formname for f in forms track by f.Formid"></select>