How to change the dataSource dynamically using web API

public class DefaultController : ApiController
    {
        // GET api/<controller>  
        public PageResult<Treegrid> Get(ODataQueryOptions opts)
        {
            TaskDetailsCollection TaskCollection = new TaskDetailsCollection();
            List<Treegrid> emp = TaskCollection.GetDataSource();
            return new PageResult<Treegrid>(opts.ApplyTo(emp.AsQueryable()) as IEnumerable<Treegrid>, null, emp.Count);
        }
     };

<div id="angulartreegrid" ej-treegrid 
//… 
></div>
<script> 
        var dataManager = ej.DataManager({ url: 'api/Default', adaptor: newej.WebApiAdaptor() }); 
        var query = ej.Query().take(2); 
        var execute = dataManager.executeQuery(query) // executing query 
            .done(function (e) {
                    secondSource = e.result; 
             }); 
 angular.module('listCtrl', ['ejangular']) 
       .controller('TreeGridCtrl', function ($scope) { 
           $scope.selectedRow = 1; 
           $scope.template = "descriptionTemplate"; 
           $scope.data = dataManager; 
           $scope.columns = columns; 
         });        
        $("#datasource").click(function () { 
            var obj = $("#angulartreegrid").data("ejTreeGrid"); 
            obj.option("dataSource", secondSource); 
        })
</script> 

[Model.cs] 
public class TaskDetailsCollection 
    { 
        public List<Treegrid> GetDataSource() 
        { 
            List<Treegrid> tasks = new List<Treegrid>(); 
           tasks.Add(new Treegrid() 
            { 
                TaskID = 1, 
                TaskName = "Planning", 
                StartDate = "02/03/2014", 
                EndDate = "02/07/2014", 
                Priority = "Normal", 
            }); 
//… 
        } 
   }