In the below code.<!DOCTYPE html><html ng-app=app10 ng-cloak>    <head>        <title>Custom directives</title>        <style>            [ng\:cloak], [ng-cloak], .ng-cloak{                display: none;            }        </style>    </head>    <body>        <div ng-controller=mainCtrl as o>            <div  bb-player-list=bbPlayers array-item=name | uppercase ng-model=o>             </div>        </div>        <script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js></script>        <script type=text/javascript src=js/exam10.js></script>    </body></html>var app10 = angular.module(app10, []);app10.directive(bbPlayerList, DirectiveFunction);function DirectiveFunction(){    return function(scope, element, attrs){            var data  = ;            if(attrs[ngModel] === )                data = scope[attrs[bbPlayerList]];            else                data = scope[attrs[ngModel]][attrs[bbPlayerList]];    }}app10.controller(mainCtrl, MainController);function MainController(){    this.bbPlayers = [        {name: Barry Bonds, avg: 0.298, hr: 762, obp: 0.444},        {name: Hank Aaron, avg: 0.305, hr: 755, obp: 0.374},        {name: Babe Ruth, avg: 0.342, hr: 714, obp: 0.474},        {name: Ted Williams, avg: 0.344, hr: 521, obp: 0.482}    ];}In DirectiveFunction, there is a code smell in retrieving the data using ngModel,     var data  = ;    if(attrs[ngModel] === )        data = scope[attrs[bbPlayerList]];    else        data = scope[attrs[ngModel]][attrs[bbPlayerList]];Reason to add this code smell is,if controller is instantiated like mainCtrl as o then ngModel would be o otherwise ngModel will be . This attribute ngModel will decide, how to access bbPlayers in DirectiveFunction?Can I avoid this code smell in DirectiveFunction?How does DirectiveFunction get immune to, the way mainCtrl is instantiated?
Code smell in AngularJS custom directive
angularjs
You should consider require-ing the ngModelcontroller (and the MainController, if needed) inside your directive definition instead of inspecting the attrs inside of the link function:function DirectiveFunction(){  return {    require: [ '^ngController', '?ngModel' ],    link: (scope, element, attrs, controllers) => {      const [ MainController, ngModel ] = controllers;      data = main.bbPlayers;    }  };}It appears that you're trying to share data between controllers, however, which is best done through a shared, named service. Consider instead:angular.module('app10')  .factory('Players', function(){ // injectable, if you need it...    return [      {name: Barry Bonds, avg: 0.298, hr: 762, obp: 0.444},      {name: Hank Aaron, avg: 0.305, hr: 755, obp: 0.374},      {name: Babe Ruth, avg: 0.342, hr: 714, obp: 0.474},      {name: Ted Williams, avg: 0.344, hr: 521, obp: 0.482}    ];  })  .directive('bbPlayerList', function(){ // also injectable...    return {      controller: function(Players){ // injectable again...        // Do stuff with `Players` if you need to...      }    }  });If you need to fetch the data from a server and cache the results, you can put that logic in the setup of Players or expose a method that will do the same:angular.module('app10')  .factory('Players', function(){ // injectable again...    return {      all: () => [        {name: Barry Bonds, avg: 0.298, hr: 762, obp: 0.444},        {name: Hank Aaron, avg: 0.305, hr: 755, obp: 0.374},        {name: Babe Ruth, avg: 0.342, hr: 714, obp: 0.474},        {name: Ted Williams, avg: 0.344, hr: 521, obp: 0.482}      ]    };  });Then call Players.all() inside any constructor to get all the players. You can easily replace the dummy data with a call to an endpoint with $http or $resource or Restangular.