idleworx

angular.module('idleworx-message-service')

    .controller('ControllerDemo',['$scope','MessageService',function($scope,MessageService){
        
        MessageService.init($scope); //1st thing inside a controller, call the init() method

        /* 
           Then anywhere inside your controller you need to write a message use the message service methods. 
            Don't forget to pass in the current scope. 
        */

idleworx

<div data-ng-if="messages.infoMessage" class="alert alert-info">
    <h3>Info</h3>
    <p>{{messages.infoMessage}}</p>
</div>

<div data-ng-if="messages.warnMessage" class="alert alert-warning">
    <h3>Warning</h3>
    <p>{{messages.warnMessage}}</p>
</div>

idleworx

<div data-ng-if="messages.debugMessage" class="alert alert-info">
    <h3>Debug</h3>
    <p>{{messages.debugMessage}}</p>
    <pre data-ng-if="messages.debugData"><span data-ng-bind="messages.debugData | json"></span></pre>
</div>

idleworx

<div data-ng-controller="ControllerDemo">
    <div data-ng-if="messages" data-ng-include="'partials/messages.tpl.html'"></div>
    <div data-ng-if="messages" data-ng-include="'partials/debug-messages.tpl.html'"></div>
</div>

idleworx

//angular.module('yourappmodule',['idleworx-message-service']); //don't forget to add a dependency to your apps's module

angular.module('idleworx-message-service')

    .factory('MessageService',['$log',function ($log) {

        $log.info('MessageService Initialized ...');

        var service = {

idleworx

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

idleworx

{
    "fields": {
      "link": {
        "description": "Link",
        "name": "link",
        "order": 1,        
        "value": "http://www.google.com"
      },
      "name": {
        "description": "Name",

idleworx

function getFieldsSorted(item){
  var fields = _.sortBy(item.fields,'order'); //using the awesome underscorejs library
  return fields;
};

idleworx

//ordered fields for a single item, uses later in sorting table columns
[
  {
    "description": "Link",
    "name": "link",
    "order": 1,    
    "value": "http://www.google.com"
  },
  {
    "description": "Name",

idleworx

<table class="table table-striped" ng-if="items.length > 0">
  <thead>
    <tr>
        <th ng-repeat="field in getFieldsSorted(items[0])">
            {{field.description}}            
        </th>
    </tr>
  </thead>
</table>