<label class="item item-input">
    <span class="input-label">Calendar</span>
    <input type="text" ng-model="myCalendar" mobiscroll-calendar="{ theme: 'ios', display: 'bottom' }">
</label>

<label class="item item-input">
    <span class="input-label">Color</span>
    <input type="text" ng-model="myColor" mobiscroll-color="{ theme: 'ios', display: 'bottom' }">
</label>

<label class="item item-input">
    <span class="input-label">Date</span>
    <input type="text" ng-model="selectedDate" mobiscroll-date="{ theme: 'ios', display: 'bottom' }">
</label>

<label class="item item-input">
    <span class="input-label">Date</span>
    <input type="text" mobiscroll-data="events" ng-model="myEventcalendar" mobiscroll-eventcalendar="{ theme: 'ios', display: 'bottom' }">
</label>

angular.module('myModule',['mobiscroll-eventcalendar'])
    .controller('myController', ['$scope', function ($scope) {
        $scope.events = [ 
            { d: new Date(2013, 10, 13), text: 'My Big Event' },
            { d: '12/25', text: 'Christmas' }
        ];
    }]);

<div ng-app="demoApp" ng-controller="demoController">
    <div mobiscroll-form="settings">
        <label>
            Username
            <input name="username" ng-model="username">
        </label>
            <label>
            Password
            <input name="password" ng-model="password" type="password">
        </label>
        <button type="submit">Sign In</button>
    </div>
</div>

<div ng-app="demoApp" ng-controller="demoController">
    <ul mobiscroll-image mobiscroll-instance="demo" ng-model="selected" style="display:none">
        <li ng-repeat="item in data" data-val="{{item.value}}" data-icon="{{item.icon}}">
            <p>{{item.text}}</p>
        </li>
    </ul>
</div>

angular
    .module('demoApp', ['mobiscroll-image'])
    .controller('demoController', ['$scope', function ($scope) {
        $scope.data = [{
            value: 'Share',
            icon: 'share',
            text: 'Share'
        }, {
            value: 'Delete',
            icon: 'remove',
            text: 'Delete'
        }];

        $scope.settings = {
            enhance: true
        };
    }]);

<div ng-app="demoApp" ng-controller="demoController">
    <ul mobiscroll-listview mobiscroll-data="data" style="display:none">
        <li>{{item.name}}</li>
    </<ul>
</<div>

angular
    .module('demoApp', ['mobiscroll-listview'])
    .controller('demoController', ['$scope', function ($scope) {
        $scope.data = [
            { name: 'Apples' },
            { name: 'Cakes' },
            { name: 'Bottles of Juice' }
        ];
    }]);

<label class="item item-input">
    <span class="input-label">Measurement</span>
    <input type="text" ng-model="myMeasurement" mobiscroll-measurement="{ theme: 'ios', display: 'bottom' }">
</label>

<div ng-app="myModule" ng-controller="myController">
    <ul ng-model="mymenustrip" mobiscroll-menustrip="settings">
        <li data-icon="connection">Wi-Fi</li>
        <li data-icon="location">Location</li>
        <li data-selected="true" data-icon="volume-medium">Sound</li>
    </ul>
<div/>

<label class="item item-input">
    <span class="input-label">Number</span>
    <input type="text" ng-model="myNumber" mobiscroll-number="{ theme: 'ios', display: 'bottom' }">
</label>

<label class="item item-input">
    <span class="input-label">Numpad</span>
    <input type="text" ng-model="myNumpad" mobiscroll-numpad="{ theme: 'ios', display: 'bottom' }">
</label>

<label class="item item-input">
    <span class="input-label">Range</span>
    <input type="text" ng-model="myRange" mobiscroll-range="{ theme: 'ios', display: 'bottom' }">
</label>

<label class="item item-input">
    <span class="input-label">Rating</span>
    <input type="text" ng-model="myRating" mobiscroll-rating="{ theme: 'ios', display: 'bottom' }">
</label>

<label class="item item-input">
    <span class="input-label">Scroller</span>
    <input type="text" ng-model="myScroller" mobiscroll-scroller="settings">
</label>

angular
.module('myModule', ['mobiscroll-scroller'])
.controller('myController', ['$scope', function ($scope) {
    $scope.settings = {
        showLabel: true,
        wheels: [
            [{
                label: 'First wheel',
                data: ['0', '1', '2', '3', '4', '5', '6', '7']
            }, {
                label: 'Second wheel',
                data: [{
                    value: 0,
                    display: 'a'
                }, {
                    value: 1,
                    display: 'b'
                }, {
                    value: 2,
                    display: 'c'
                }, {
                    value: 3,
                    display: 'd'
                }]
            }]
        ]
    };
}]);

<div ng-app="demoApp" ng-controller="demoController">
    <select ng-model="myselect" mobiscroll-select="settings" mobiscroll-instance="demo">
        <option value="1">Berlin</option>
        <option value="2">London</option>
        <option value="3">New York</option>
        <option value="4">Paris</option>
    </select>
</div>

<label class="item item-input">
    <span class="input-label">Timer</span>
    <input type="text" ng-model="Timer" mobiscroll-timer="{ theme: 'ios', display: 'bottom' }">
</label>

<label class="item item-input">
    <span class="input-label">Timespan</span>
    <input type="text" ng-model="Timespan" mobiscroll-timespan="{ theme: 'ios', display: 'bottom' }">
</label>

<div ng-app="myModule" ng-controller="myController">
    <ul mobiscroll-list="settings" ng-model="mylist">
        <li>America
            <ul>
                <li>Mexico</li>
                <li>Brasil</li>
            </ul>
        </li>
        <li>Europe
            <ul>
                <li>Germany</li>
                <li>France</li>
                <li>Italy</li>
            </ul>
        </li>
        <li>Asia
            <ul>
                <li>China</li>
            </ul>
        </li>
    </ul>
</div>

<div ng-app="demoApp" ng-controller="demoController">
    <div ng-model="mywidget" mobiscroll-widget="settings" mobiscroll-instance="demo" style="display: none;">
        <h3 class="md-text-center">Hi</h3>
        <p class="md-text-center">Are you feeling good today?</p>
    </div>

    <button ng-click="demo.show()">How are you feeling?</button>
</div>