How to interlink daterange picker (AngularJS custom directive) to AngularUI-Select2 behaviour?

I'm using

1. Angular UI - Select2 directive to show an option box.
2. Bootstrap Date-Range Picker to show a date picker

Both of them are working fine individually.

Working of the Date picker

Whenever the date range is changed, new data is fetched through AngularJS. This is the code:

HTML

<div ng-app="my-app" ng-controller="MyController">

    <div id="reportrange" class="reportrange"
        my-date-picker="changeDate($startDate, $endDate)">
        <span></span>
    </div>

</div>

Angular script

//directive code
    var mod = angular.module('my-app', ['ngResource', 'ui']);

    mod.directive('myDatePicker', function ($timeout) {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                $(element).daterangepicker({
                    //options now shown for brevity
                }, function (startDate, endDate) {
                    $('#reportrange span').html(startDate.toString('MMMM d, yyyy') + ' - ' + endDate.toString('MMMM d, yyyy'));

                    var fStartDate =  moment(startDate).format('YYYY-MM-DD');
                    var fEndDate = moment(endDate).add('days', 1).format('YYYY-MM-DD');

                    scope.$eval(attr.myDatePicker, {$startDate: fStartDate, $endDate: fEndDate});

                });

                var inEndDate = Date.today();
                var inStartDate = Date.today().add({ days: -29 });
                //Set the initial state of the picker label
                $('#reportrange span').html(inStartDate.toString('MMMM d, yyyy') + ' - ' + inEndDate.toString('MMMM d, yyyy'));
            }
        };
    });

//Controller code
function MyController($scope, $resource, $timeout) {
    var inEndDate = moment(Date.today()).format('YYYY-MM-DD');
    var inStartDate =  moment(Date.today().add({ days: -29 })).format('YYYY-MM-DD');
    var User = $resource('/fetch?from=:from&to=:to', {from: inStartDate, to: inEndDate}, {
        getAll: {method: 'GET', isArray: true}
    });

    $scope.changeDate = function(fromDate, toDate) {
        $scope.customers = User.getAll({from: fromDate, to: toDate});
    };

    $scope.customers = User.getAll();
}

This is working fine. I'm getting customers list for the selected range (fetched through $resource everytime the range is changed)

Working of the Select2 AngularUI

<select ui-select2 ng-model="selectedCity" >        
    <option value="1">City1</option>
    <option value="2">City2</option>    
    <option value="3">City3</option>        
</select>

This is also working fine.

The requirement is that whenever an option is selected (e.g. 2nd option, City2) I want to get customers list for the selected range for City2. And while City2 is selected, user can change the date range too and get a new list of customers value.

So I'm stuck as to how to interlink Datetime picker and this select options? Kindly guide me.

I'm stuck. :(