angular copy

to prevent breaking links to linked arrays.

HTML

<div data-ng-controller="SearchCtrl">
    <div class="search">
        	<h2>Search</h2>
        <div class="box">
            <input type="text" id="search" maxlength="75" data-ng-model="search_term"
            data-ng-change="doSearch()" placeholder="Type to start your search..."
            />
        </div>
    </div>
    <div class="search-summary">
        <p><span class="field">You searched for:</span> {{ search_term }}</p>
    </div>
    <div class="results">
        <ul>
            <li data-ng-repeat="item in searchService.results">
                	<h3>{{ item.title }}</h3>
            </li>
        </ul>
    </div>
</div>

JavaScript

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

app.factory('searchService', function ($http) {
    var results = [{
        'title': 'title 1'
    }, {
        'title': 'title 2'
    }];

    function find(term) {
        /*
    The Ajax bit...
    
    $http.get('/json/search').success(function(data) {
			results = data.results;
    });
    
    */
        var new_results = [{
            'title': 'title 3'
        }, {
            'title': 'title 4'
        }]
        angular.copy(new_results, results);
    }

    //public API
    return {
        results: results,
        find: find
    };
});

app.controller("SearchCtrl", ['$scope', '$http', 'searchService', function ($scope, $http, searchService) {
    $scope.search_term = '';
    $scope.searchService = searchService;
    $scope.searchService.results = searchService.results;
    console.log($scope.searchService.results);

    $scope.doSearch = function () {
        $scope.searchService.find($scope.search_term);
    };

    //$scope.searchService.find();
}]);