Initializing LUMX object

Question

Im using this lovely Lumx library as part of my angular app and trying to use their datepicker : http://ui.lumapps.com/components/date-picker

I have included the lumx files and the button is appearing, styled appropriate in my app, however when I click the Open date picker button happens. There are no js errors either so it appears to me that the "vm" object is not being initialized correctly? {{ vm.datePicker.basic.dateFormatted }} for example is not showing anything so it does appear to be an initialization/scope issue.

To get up and running, I have used the HTML as in the example:

<div class="p+">
{{ vm.datePicker.basic.dateFormatted }}

<div class="mt">
    <lx-button ng-click="vm.openDatePicker(vm.datePickerId)">Open date picker</lx-button>
</div>

<lx-date-picker id="{{ vm.datePickerId }}"
                ng-model="vm.datePicker.basic.date"
                lx-callback="vm.datePickerCallback(newDate)"
                lx-locale="{{ vm.locale }}"
                lx-max-date="vm.datePicker.basic.maxDate"
                lx-min-date="vm.datePicker.basic.minDate"></lx-date-picker>
</div>

Visually the button appears as per the example.

I have then added the following .js to the controllers.js file, again as close to the example as I can manage. I know it is being initialized, as the alert("a"); pops up when the app loads. I cannot though get anything beyond this to work, i.e. when I click on the button I want to see the date picker.

I know I am not initializing correctly, but can someone see what I am doing wrong here? alert("b") for example is never getting called. Any help would be great!?

:

myfirstControllers.controller('pageController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
$http.get('js/data.json').success(function (data) {
    $scope.profiles = data;
    $scope.whichItem = $routeParams.itemId;
});

pageController.$inject = ['LxDatePickerService'];
alert("a");

function pageController(LxDatePickerService) {
    alert("b");
    var vm = this;
    vm.datePickerCallback = datePickerCallback;
    vm.openDatePicker = openDatePicker;
    vm.locale = 'en';
    vm.datePicker = {
        basic: {
            date: new Date()
            , dateFormatted: moment().locale(vm.locale).format('LL')
            , minDate: new Date(new Date().getFullYear(), new Date().getMonth() - 2, new Date().getDate())
            , maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 2, new Date().getDate())
        }
        , input: {
            date: new Date()
            , dateFormatted: moment().locale(vm.locale).format('LL')
        }
    };
    vm.datePickerId = 'date-picker';
    ////////////
    function datePickerCallback(_newdate) {
        alert("b");
        vm.datePicker.basic.date = _newdate;
        vm.datePicker.basic.dateFormatted = moment(_newdate).locale(vm.locale).format('LL');
    }

    function openDatePicker(_pickerId) {
        alert("c");
        LxDatePickerService.open(_pickerId);
    }
}
}]);