Ted Ted - 1 year ago 47
AngularJS Question

ng-model doesn't isn't bi directional specifically on my app

UPDATE: Apparently setting the controller in the view such

ng-controller="SomethingController as Ctrl"
and then using it in the model
works. What the f***?

I've been meaning to implement this specific directive on my application. It simply requires me to put my model as an attribute of the element as
and it should work. I see examples of it working, and I've made it work on jsfiddle too.

However it simple does not want to work on my app. I have installed through bower, I've included all the files in my
and I've also injected it
angular.module('myApp', ['angular-input-stars'])

Now the issues is, the model only works one way through on my application. The
's value and sets the correct amount of stars, but once I change the stars (in and through the directive) that value is not being sent back to my model.

I've checked the directive's code and they do use the model controller set the value:

function link(scope, element, attrs, ngModelCtrl) {

scope.setValue = function (index, e) {

And even though the directive does not include in the
scope: {ngModel: '='}
, this still works on examples and jsFiddle, even though I don't really understand the
(even after researching about it).

I think it may have something to do with my application's architecture, but I'm not sure. The app is very robust and well structured, and I cannot display it's code (company code), but I can say how we structured it:

|-- app.js (contains directive module, show bellow)
|-- index.html
|-- /modules
|-- /something
|-- /overview
|-- somethingController.js
(included in index.html & loaded through directive)
|-- somethingDirective.js
(included in index.html & loaded through app.js module)
|-- somethingView.html
(loaded through directive)

app.js code:

var app = angular.module('myApp', [


var somethingOverview = angular.module('something.overview');

somethingOverview.directive('somethingOverviewDirective', function () {
return {
restrict: 'E',
controller: 'SomethingOverviewController',
templateUrl: 'modules/something/overview/somethingOverviewView.html',
scope: {
overview: '=overview',
errors: '=errors'


var somethingOverview = angular.module('something.overview', []);

['$scope', function ($scope) {
function init() {
$scope.myModel = 5;

// ...



Rating: {{myModel}}
<input-stars max="5" ng-model="myModel"></input-stars>

Answer Source

As @charlietfl mentioned in the comments, primitive value in scope directly is the problem

Code without controllerAs:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        Hello, {{name}}!

        <div>Rating: {{rating}}</div>

        <input-stars ng-model="rating.value" max="5"></input-stars> 

app.controller("MyCtrl", ['$scope', function($scope) {
    $scope.rating = {
        value: 5
    $scope.name = 'Superhero';


Updated jsFiddle: