Populate angular filter from JS function doesnt trigger the filter to work

Question

I am not sure if what I am doing is the right angular way of doing it, I have the following JSFiddle that displays on a repeat the rows from a query result.

Javascript:

function updateSearch(search) {
    console.log(search);
    document.getElementById('searchFor').value = search;
}

function ExampleController($scope) {
    $scope.profiles = [{
        Company_Name__c: 'John & Co',
        Events_per_year__c: '1-4',
        Delegates_Each_Year__c: '10-50',
        Type_of_Events__c: 'Corporate event'
    }, {
        Company_Name__c: 'Maritis',
        Events_per_year__c: '5-10',
        Delegates_Each_Year__c: '151-300',
        Type_of_Events__c: 'Association'
    }, {
        Company_Name__c: 'Mike & Co',
        Events_per_year__c: '5-10',
        Delegates_Each_Year__c: '1000+',
        Type_of_Events__c: 'Corporate event'
    }, {
        Company_Name__c: 'Adam & Co',
        Events_per_year__c: '5-10',
        Delegates_Each_Year__c: '151-300',
        Type_of_Events__c: 'Association'
    }, {
        Company_Name__c: 'Juliesss',
        Events_per_year__c: '5-10',
        Delegates_Each_Year__c: '301-500',
        Type_of_Events__c: 'Team building'
    }, {
        Company_Name__c: 'Juliet',
        Events_per_year__c: '20+',
        Delegates_Each_Year__c: '301-500',
        Type_of_Events__c: 'Association'
    }];
}

angular.module('searchProfile',[]);

HTML:

<div ng:app="searchProfile"><div ng-controller="ExampleController">
        <input id="searchFor" type="text" class="form-control" ng-model="search" placeholder="Search" />
        <br />
        <div class="row">
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <select id="numberEvents" class="form-control" onchange="updateSearch(this.value)">
                    <option value="">What is the average number of delegates that attend each year</option>
                    <option value="10-50">10-50</option>
                    <option value="51-150">51-150</option>
                    <option value="151-300">151-300</option>
                    <option value="301-500">301-500</option>
                    <option value="501-800">501-800</option>
                    <option value="1000+">1000+</option>
                </select>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <select id="delegates" class="form-control" onchange="updateSearch(this.value)">
                    <option value="">How many events do you organise each year</option>
                    <option value="1-4">1-4</option>
                    <option value="5-10">5-10</option>
                    <option value="11-15">11-15</option>
                    <option value="16-20">16-20</option>
                    <option value="20+">20+</option>
                </select>
            </div>
            <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                <select id="delegates" class="form-control" onchange="updateSearch(this.value)">
                    <option value="">What type of events</option>
                    <option value="Small meeting">Small meeting</option>
                    <option value="Conference">Conference</option>
                    <option value="Association">Association</option>
                    <option value="Corporate event">Corporate event</option>
                    <option value="Incentive and reward groups">Incentive and reward groups</option>
                    <option value="Team building">Team building</option>
                    <option value="Exhibitions">Exhibitions</option>
                    <option value="Large trade shows and events">Large trade shows and events</option>
                    <option value="Other">Other</option>
                </select>
            </div>
        </div>
        <br />
        <table id="searchTextResults" class="table table-bordered">
            <tr class="success">
                <th>Company Name</th>
                <th>Events</th>
                <th>Delegates</th>
                <th>Type of Events</th>
            </tr>
            <tr ng-repeat="i in profiles | filter:search">
                <td><span>{{i.Company_Name__c}}</span>
                </td>
                <td>{{i.Events_per_year__c}}</td>
                <td>{{i.Delegates_Each_Year__c}}</td>
                <td>{{i.Type_of_Events__c}}</td>
            </tr>
        </table>
    </div>    
</div>

I have a filter in it, that works fine. However I have some dropdowns that when change it updates the filter with the option selected. Unfortunately when the filter is changed due to this action, the table is not filter, I have to delete the last word in order to take place.

The images below illustrates better what it is happening

when dropdown change it populates the original input for search

After deleting last "word" in this case a zero the table got filtered

Answer 1

I've forked and updated your fiddle so it is now working: http://jsfiddle.net/2gmn11os/

The issue you were having is that the "onchange" event was making changes to variables inside your scope outside of Angulars digest cycle. This is why you saw the updates be applied only when you changed the input field directly - those changes are processed through the ng-model directive which kicks off the cycle and re-applies filters, etc.

You want your 'selects' to read a bit more like this, so that changes to their state are part of the Angular cycle:

<select id="numberEvents" ng-model="events" class="form-control" ng-change="updateSearch(events)">

I also shifted the code around so it's a bit tidier too, instead of having that function on the global scope outside of your app structure :)