AngularJS application to display 10 search results at a time

I am working on an angular application. I have written a controller for a page which gets 10 objects from an api. On clicking the next button, it gets the next 10 objects and so on. I have also added a search box in the same controller which also gets 10 results of the searched term and on clicking the next button it gets the next 10 results.

HTML -

    {{job.job_name}}
    
        Company: {{job.company_name}}
    

See More

 
    var toggleVar = true;
    $('.searchButton').on('click', function() {
        if(toggleVar) {
            $('.searchButton').animate({right: '210px'}, '1200');
            $('#search-box').css("visibility", "visible");
            setTimeout(function() {
                $('.searchButton').css("color", "#444444");
            }, 100);
            $('#search-box').animate({ width: 185 }, '1200').focus();
            toggleVar = false;
        }
        else {
            $('#search-box').animate({ width: 0 }, '1200');
            $('.searchButton').animate({right: '25px'}, '1200');
            setTimeout(function() {
                $('.searchButton').css("color", "#eeeeee");
            }, 200);
            toggleVar = true;
        }
    });

    $('#search-box').focusout(function() {
        if(!toggleVar) {
            $('#search-box').animate({ width: 0 }, '1200');
            $('.searchButton').animate({right: '25px'}, '1200');
            setTimeout(function() {
                $('.searchButton').css("color", "#eeeeee");
            }, 200);
            toggleVar = true;
        }
    });

Controller -

```
angular.module('jobSeekerApp')
.controller('JobsallCtrl', ['getAllJobs', 'searchJobs', function (jobsService, jobsSearchService) {
var ctrl = this;
var count;
ctrl.pageNumber = 1;
ctrl.searchPageNumber = 1;
ctrl.isSearching = false;
ctrl.searchTerm = "";

// Initial page load
jobsService.getJobs(ctrl.pageNumber)
.then(function(response) {
ctrl.jobsList = response.dat

Depending on how the services work, I would, if possible, try to unify
getAllJobs and searchJobs to a single service JobService and use this
unified service.

Move ctrl.jobsList inside JobService, there is not particular reason why
this has to be handled by the controller. Instead, you could just do a
one to one ctrl.jobsList = JobService.jobsList in your controller. You will have to handle
your concats in the service as well.

Move checkCount function to html using ng-show:

See More

This will give you more opportunities to clean up your controller a little bit, maybe something like this:

angular.module('jobSeekerApp')
.controller('JobsallCtrl', ['JobService', function (JobService) {

    var ctrl = this;
    var count;

    ctrl.jobsList = JobService.jobsList;
    count = JobService.count;

    ctrl.pageNumber = 1;
    ctrl.searchPageNumber = 1;
    ctrl.isSearching = false;
    ctrl.searchTerm = "";

    JobService.getJobs(ctrl.pageNumber);

    ctrl.getNext = function() {

        if(isSearch) {
            ctrl.searchPageNumber = ctrl.searchPageNumber + 1;
            JobService.searchJob(ctrl.searchPageNumber, ctrl.searchTerm);
            return;
        }

        ctrl.pageNumber = ctrl.pageNumber + 1;
        JobService.getJobs(ctrl.pageNumber);

    };

    ctrl.search = function() {
        ctrl.searchTermLen = ctrl.searchTerm.length;

        if(isSearch) {
            ctrl.isSearching = true;
            ctrl.searchPageNumber = 1;
            JobService.searchJob(ctrl.searchPageNumber, ctrl.searchTerm);
            return;
        }

        ctrl.pageNumber = 1;
        JobService.getJobs(ctrl.pageNumber);
    };

    ctrl.deleteTerm = function (event) {

        if (event.keyCode === 8) {
            ctrl.searchTermLen = ctrl.searchTermLen - 1;
        }

        ctrl.isSearching = ctrl.searchTermLen !== 0;
    };

    ctrl.checkCount = function() {
        var result = count >= 10;
        count = count - 10;
        return result;
    };

    function isSearch() {
        return !(ctrl.searchTerm === "" && ctrl.isSearching === false);
    }

}]);

HEADS UP! This is just example code, untested.

StackExchange Code Review Q#138324, answer score: 2