Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
​
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  
  <div ng-controller="myCtrl">
​
​
    <div user-list users="data.users" 
         on-select="selectUser(user)"></div>
      <hr>   
  
    
      <h3>outside directive</h3>
      <code>{{data}}</code>      
      <h4>should update data.activeUser - why not working?</h4>
  </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.js"></script>
</body>
</html>
 
console.clear();
var app = angular.module('app', []);
​
app.controller('myCtrl', function ($scope) {
​
  $scope.data = {
    users : [{
      name : 'bob' 
    },{
      name : 'koko' 
    }],
    activeUser : {}
  };
  
  $scope.selectUser = function (user) {
  
    // console is showing user data
    console.log(user, $scope.data);
    
    $scope.data.activeUser = user;
    
    console.log($scope.data.activeUser);
    // data.activeUser has been updated, but the view is not. why is that?
​
  };
});
​
​
app.directive('userList', function () {
  return {
    scope : {
      users : '=',
      onSelect : '&'
    },
    template : '<h3>in directive scope</h3>' +
    '<button ng-repeat="u in users" ng-click="onSelect({ user : u })">Set Active User: {{u.name}}</button>' + 
    '<br/><code>{{users}}</code>'
  };
});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers