Can't get it to work

[beatelite]

I'm newish to angular but I swear I'm hooking it up right.

I have the script set in the head and the ['mm.acl'] declared in on my app.

my app.js file:

'use strict';

angular.module('app', [
    'ui.bootstrap',
    'ui.router',
    'ui.utils',
    'oc.lazyLoad',
    'ngResource',
    'mm.acl'
]);

I have the following example in in my main.js file:

angular.module('app')
.run(['AclService', function (AclService) {

  // Set the ACL data. Normally, you'd fetch this from an API or something.
  // The data should have the roles as the property names,
  // with arrays listing their permissions as their value.
  var aclData = {
    guest: ['login'],
    member: ['logout', 'view_content'],
    admin: ['logout', 'view_content', 'manage_content']
  };
  AclService.setAbilities(aclData);

  // Attach the member role to the current user
  AclService.attachRole('admin');

}]);

I have the example in my controller.js

app.controller('DemoCtrl', ['$scope', 'AclService', function ($scope, AclService) { $scope.can = AclService.can; $scope.id = 22; $scope.title = 'My Demo Title'; }]);

and the markup in my view.html (and yes the controller.js is loading on this page)

<h1>{{ title }}</h1> <a ng-href="edit/{{ id }}" ng-show="can('manage_content')">Edit</a>

When console.log(AclService.can()); - I get false.

When I console.log(AclService.hasRole()); - I get false

When I console.log(aclData); - I see the object.

The role is set to admin so I expect that I'll see the edit button but I don't. Why? What am I missing?

[beatelite]

Just figured it out. I was using controllerAs and binding the data to the controller vs the $scope. I was calling the {{DemoCtrl.title}} correctly but didn't realize I need to call the can('manage_content') from the controller as well.

final code block that did it: <a ng-href="edit/{{ DemoCtrl.id }}" ng-show="DemoCtrl.can('manage_content')">Edit</a>