Ionic + AngularJS - Fiddle

by aubz88

HTML

<link rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.9/css/ionic.min.css">
<script src="http://code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.min.js"></script>
<body ng-app="starter">
    <div ng-controller="ContentController">
        <ion-view left-buttons="leftButtons" cache-view="false" right-buttons="rightButtons">
            <ion-content class="bg-light" padding="false">
                <div class="list">
                    <ul class="list">
                        <li class="item item-icon-left" ng-repeat="event in selectedDayEvents">
                            <p ng-if="event.type != null">{{ event.type }}</p>
                            <p>{{ event.description }}</p>
                            <i class="icon colorIconLeft" ng-style="{ 'border-color' : event.color, 'background-color' : event.color }"></i>
                            <span class="item-note">{{ event.times }}</span>
                        </li>
                    </ul>
                </div>
            </ion-content>
        </ion-view>
    </div>
</body>

CSS

.colorIconLeft {
    float: left;
    width: 20px;
    height: 20px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    margin-right: 10px;
}

JavaScript

// Ionic Starter App



var starter = angular.module('starter', ['ionic']);

starter.controller('ContentController', function($scope) {

    $scope.selectedDayEvents = [{
        type: 'Task',
        description: 'hi',
        color: '#0080ff',
        times: '10:00 - 14:30'
    }];

});

starter.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {

        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }

        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});