I am trying to build a Kendo UI SPA. I have two views. View 1 (appListView) shows Application Details in a grid and view 2 (activityView) will have a dropdown for application names and a grid that shows the activity for selected application

As I am loading all the application details on the loading of view 1, I would like to re-use those details to populate the dropdown on view 2. Please see my code below. Everything works fine but when I go to View 2 it makes a call to the service again to get application details. I would like to use the existing data if it is already loaded and if the uses comes to view 2 directly then it should get application data also. I am not sure what I am missing in the code.

View Markup:

<script id="appListView" type="text/x-kendo-template">
    <h3 data-bind="html: displayName"></h3>
    <div data-role="grid"
         data-editable="{'mode':'popup'}"
         data-bind="source: items"
         data-columns="[
                            {'field': 'Name'},
                            {'field': 'ContactEmail','title':'Contact Email'}
                         ]">
    </div>
</script>

<script id="" type="text\x-kendo-template">
    <div>
        Activity for Application&nbsp;&nbsp;
        <input name="AppName"
               data-role="dropdownlist"
               data-source="appsModel.items"
               data-text-field="Name"
               data-value-field="Id"
               data-option-label="Choose an application name"
               style="width:250px;" />
    </div>
    <div id="Activities" data-role="grid"
         data-bind="source: items"
         data-auto-bind="false"
         data-columns="[
                            {'field': 'Domain','title':'Domain'},
                            {'field': 'ActivityType','title':'Activity Type'}
                        ]">
    </div>
</script>

js with DataSource and View Model:

//data sources
var applications = new kendo.data.DataSource({
schema: { model: { id: "Id" } },
serverFiltering : true,
transport: {
    read: {
        url: '/api/App',
        dataType: 'json',
        type:'GET'
    }
  }
});

var activities = new kendo.data.DataSource({
schema: { model: { id: "Id" } },
transport: {
    read: {
        url: '/api/Activity',
        dataType: 'json',
        type: 'GET'
    },
    parameterMap: function (data, type) {
        if (type == "read") {
            return 'appId=' + $("#AppName").val() ;
        }
    }
}

});

//Models
var appsModel = kendo.observable({
     items: applications,
     displayName: 'My Applications'
});

var activityModel = kendo.observable({
     items: activities,
     onAppChange: function(t){
     $("#Activities").data("kendoGrid").dataSource.read();
     },
     dispayName: 'Application Activities'
});

//views
var layout = new kendo.Layout("layout-template");

var appListView = new kendo.View("appListView", { model: appsModel });
var activityView = new kendo.View("activityView", { model: activityModel });

Thank you for taking time to read this long question.