Kendo UI: One data source, two widgets
<p><strong>UPDATE:</strong> <a href="http://dojo.telerik.com/efeVe" rel="nofollow noreferrer">Here is a link to reproduce the problem</a></p>

<p><strong>RELATED:</strong> <a href="https://stackoverflow.com/questions/35793907/kendo-ui-binding-a-map-layer-to-a-data-source">This is another question of mine where similar problems are happening with Kendo UI Map, maybe it could help someone figure this one out!</a> It has one failing and one working version.</p>

<hr>

<p>I use Kendo UI's DataSource, DropDownList and Map in an Angular single-page application.</p>

<p>I want to use the same DataSource object for both the DropDownList and the Map. However, the Map behaves in a very unpredictable manner.</p>

<ol>
<li>When I put the DropDownList <em>before</em> the Map in the template, only the DropDownList gets populated. Inspecting the network traffic reveals that indeed only one request is being made. When I put the Map first, both of them get populated and two requests are made.</li>
<li>When I don't use any promises in <code>transport.read</code>, but just call <code>options.success</code> immediately with a static value, everything works as expected. Two calls are being made.</li>
</ol>

<p>I've been pulling my hair over this the entire work day, so any help is highly appreciated.</p>

<p>The data source service:</p>

<pre><code>m.factory('ourDataSource', function(foo, bar, baz) {
    return new kendo.data.DataSource({
        transport: {
            read: function(options) {
                foo().then(function (result) {
                    return bar(result);
                }).then(function (result) {
                    return baz(result);
                }).then(function (result) {
                    options.success(result);
                }).catch(function (err) {
                    options.error(err);
                });
            }
        }
    });
});
</code></pre>

<p>The controller:</p>

<pre><code>m.controller('ourController', ['ourDataSource', function(ourDataSource) {

    // set the data source of the dropdownlist
    this.ourDataSource = ourDataSource;

    // set up the map layers
    this.mapLayers = [{
        type: 'tile',
        urlTemplate: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/#= zoom #/#= y #/#= x #',
    }, {
        type: 'marker',
        dataSource: ourDataSource, // the same data source as before
        locationField: 'Position',
        titleField: 'Title'
    }];
}]);
</code></pre>

<p>The view:</p>

<pre><code>&lt;div ng-controller="ourController as ctrl"&gt;

    &lt;select kendo-drop-down-list
            k-data-text-field="'Title'"
            k-data-value-field="'Title'"
            k-data-source="ctrl.ourDataSource"&gt;&lt;/select&gt;

    &lt;div kendo-map
         k-zoom="2"
         k-center="[1, 1]"
         k-layers="ctrl.mapLayers"&gt;
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>What am I missing here?</p>