angularJS - ng-model is not updating

Question

After working on some tutorials about AngularJS I'm now writing my very first example app on my own. I started with showing a very simple list of employees, which works fine. Now I wanted to add a simple text filter, like I learned in a tutorial.

I added an input with ng-model="filterText" and | filter: filterText to the list in my html as well as $scope.filterText = null; to my angularJS controller.

When I now enter anything to the input, nothing happens. When I set a filterText value directly to my AngularJS controller, the filter is working, so there has to be a problem with updating the value of textFilter.

What can I do to get it working? I have already searched for a solution, but nothing helps.

My html:

<div class="container main-frame" ng-app="Employees" ng-controller="mainController" ng-init="init()">

<div id="searchbox">
    <label>Filter: </label>
    <input type="text" ng-model="filterText" />
</div>

<div id="emplist">

    <h2>Employees</h2>

    <p>
        <ul id="emps">
            <li ng-repeat="mitarbeiter in results | filter: filterText">
                # {{mitarbeiter.id}} - <strong>{{mitarbeiter.name}}</strong>
            </li>
        </ul>
    </p>

</div>

My angularJS:

var app = angular.module('Employees', []);

app.controller("mainController", function ($scope) {

    $scope.results = [];
    $scope.filterText = null;

    $scope.init = function(){

        jsonObject = eval(jsonfunction("parameters"));

        angular.forEach(jsonObject, function (mitarbeiter, key) {

            $scope.results.push(mitarbeiter);

        });

    }

})

EDIT:

According to the answer of NidhishKrishnan:

In firebug my jsonObject looks like the following:

[{"id":1,"name":"John"},{"id":2,"name":"Jane"},{"id":3,"name":"Peter"}]

I changed the working solution with this jsonObject and it is still working fine, so this should not be the problem...

Further information: I'm working in VS 2013 debugging mode with a web api 2 controller, which gets the data of a sql database. My jsonfunction is nothing else but an ajax request to the controller.

EDIT2:

When I don't use eval(), nothing changes. I successfully get my list, but I can't use the filter... here's my Ajax request:

function jsonfunction(par) {

    $.ajax({

        url: url + par,

        async: false,

        success: function (data) {

            json = data;

        },

        headers: getSecurityHeaders()

    });

    return json;

}

The answer is formatted to JSON within my WebApiConfig.cs. There couldn't be any error...

Answer 1

jsonObject javascript variable should get some datas like as shown below

jsonObject=[{id:1,name:'Jessey'},
            {id:2,name:'John'},
            {id:3,name:'Mathew'},
            {id:4,name:'Sunny'}];  

But in your code jsonfunction is not defined, and what's the purpose of evaluating that using eval instead we need to return a JSON then everything even filter all will works fine as expected

jsonObject = eval(jsonfunction("parameters"));  

Also don't mix up JQuery with AngularJS, Since its not a Good Practice, Please read - Using Jquery UI plugin with Angular

For AJAX AngularJS itself provides $http

A Working Example

EDIT 1

$scope.init = function()
{
        $http({
            method: 'GET',
            url: '/someUrl'
             }).
        success(function (data, status, headers, config) {
            angular.forEach(data, function (mitarbeiter, key) {
                $scope.results.push(mitarbeiter);
            });
        }).
        error(function (data, status, headers, config) {
        });    
}