Popup Controller function call in angular.js

Question

I am using this Popup Dialog service, as it seems to be the popular dialog. I am calling the popup dialog as follows:

$scope.upload = function() {
    createDialogService('simpleModal.html', {
      id: 'simpleDialog',
      title: 'Upload Video to save India',
      backdrop: true,
      controller: 'TrafficListController',
      success: {label: 'Success', fn: function() {console.log('Simple modal closed');}}
    }); 
};  

and my simpleModal.html contains just the following (a form)

<div class="row-fluid">
<form ng-submit="addNewVideo()">
    <input type="text" ng-model="newVid.videoURL" placeholder="Video URL here"> <br/>
    <input type="text" ng-model="newVid.locality" placeholder="locality"> <br/>
    <input type="text" ng-model="newVid.town" placeholder="town"> <br/>
    <input type="text" ng-model="newVid.city" placeholder="city"> <br/>
    <input type="text" ng-model="newVid.pincode" placeholder="Pin Code" value="600015"> <br/>
    <input type="text" ng-model="newVid.time" placeholder="yyyy-mm-dd hh:mm" value="2014-03-20 08:20"> <br/>
    <input type="SUBMIT" value="Add Video" class="btn-primary">
</form>
</div>

But when I click on Submit button in the popup form, it throws an error TypeError: Cannot read property 'videoURL' of undefined and my addNewVideo() looks like this:

$scope.addNewVideo = function() {
    var vid = {};
    $log.log($scope);
    vid["videoURL"] = $scope.newVid.videoURL;
    vid["thumbURL"] = $scope.newVid.videoURL;
    vid["uploadedBy"] = "someone";
    vid["analyzedBy"] = "";
    vid["locality"] = $scope.newVid.locality;
    vid["town"] = $scope.newVid.town;
    vid["city"] = $scope.newVid.city;
    vid["pincode"] = $scope.newVid.pincode;
    vid["time"] = $scope.newVid.time;

    var json = JSON.stringify(vid);
}

But If I embed the form in the page itself rather than the popup, it works just fine. I am not sure whether the popup uses the same instance of the TrafficListController or is creating a new one. Even if it creates a new instance, that specific function addNewVideo() doesn't depend upon any other properties / vars of the other instance and supposed to work.

What I am donig wrong? any help?

References: index.html: https://github.com/GethuGames/Traffic-Violations-Portal/blob/master/index.html trafficListController.js: https://github.com/GethuGames/Traffic-Violations-Portal/blob/master/trafficListController.js

Answer 1

You are trying to read from $scope.newVid on your addVideo function, but it does not exist. Try to initialize this object first.