Why Error:input is undefined AngularJS

Question

I am trying make an ajax request to php from angular js. But I am not getting the data I have sent by php file.

I'm getting this error:

Error:input is undefined

My source:

File view.html:

<div class="content-panel" >
    <div class="content-panel-title">
        <h2> Date : {{jalse.contentDate}}</h2>
    </div>
    <div>
        <h4>{{jalse.contentAbstract}}</h4>
        <div>
            {{jalse.contentText}}
        </div>
    </div>
</div>

File app.js:

 (function () {
var app = angular.module('myApp', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider

            .when('/', {
                controller: 'contentsCtrl',
                templateUrl: 'views/contents.php'
            })

            .when('/jalse/:jalseId', {
                controller: 'recordsCtrl',
                templateUrl: 'views/jalse.php'
            })

            .otherwise({redirectTo: '/'});
});

}());

File jalseFactory.js:

    (function () {

'use strict';

var jasleFactory = function ($http, $q) {

var factory = {};

factory.getJalse = function () {
    var deferred = $q.defer();

    $http({method: 'GET', url: 'includes/records.php'}).
            success(function (data, status, headers, config) {
                deferred.resolve(data);
            }).
            error(function (data, status, headers, config) {
                deferred.reject(data);
            });
    return deferred.promise;
  };
return factory;
};

jasleFactory.$inject = ['$http', '$q'];
angular.module('myApp').factory('jasleFactory', jasleFactory);

}());

File recordsCtrl.js:

(function () {
'use strict';

var recordsCtrl = function($scope, $routeParams , jasleFactory) {
    var jalseId = $routeParams.jalseId;

    $scope.records = jasleFactory.getJalse();

    $scope.jalse = null;

    function init() {
        for (var i = 0, len = $scope.records.length; i < len; i++) {
            if ($scope.records[i].contentID == parseInt(jalseId)) {
                $scope.jalse = $scope.records[i];
                break;
            }
        }
    }

    init();

};

   recordsCtrl.$inject = ['$scope','$routeParams', 'jasleFactory'];

    angular.module('myApp').controller('recordsCtrl', recordsCtrl);

}());

Answer 1

Your code is making an ajax and then assuming that the response is set the records variable, As you are dealing with async call you should call the method which are going to call on $scope.records inside its success.

Factory Method

factory.getJalse = function () {
    return $http({method: 'GET', url: 'includes/records.php'});
};

Controller

(function() {
    'use strict';
    var recordsCtrl = function($scope, $routeParams, jasleFactory) {
        var jalseId = $routeParams.jalseId;

        jasleFactory.getJalse().success(function(data, status, headers, config) {
            $scope.records = data.records;
            init(); //this will fix your error.
        }).
        error(function(error, status, headers, config) {
            console.log("error occured " + error)
        });
        $scope.jalse = null;
        function init() {
            for (var i = 0, len = $scope.records.length; i < len; i++) {
                if ($scope.records[i].contentID == parseInt(jalseId)) {
                    $scope.jalse = $scope.records[i];
                    break;
                }
            }
        }
        //we will call this as soon as $scope.records gets filled
        //init(); 
    };
  recordsCtrl.$inject = ['$scope','$routeParams', 'jasleFactory'];

  angular.module('myApp').controller('recordsCtrl', recordsCtrl);

}());

Update

Your json is also not valid because it contains a malicious field which

"contentText": "1\ u0645\ u0637\ u0644\ u0628 < \/p>",
"3":"1\ u0645\ u0637\ u0644\ u0628 < \/p>",

If you remove this two field, you code will work as is

Working Plunkr