Attribute value Changing of Custom Directive

Change attribute value of custom directive.

by Joe Saad

HTML

<select name="myTables" id="myTables" ng-model="mytable">
  <option value="table1">table1</option>
  <option value="table2">table2</option>
  <option value="table3">table3</option>
  <option value="table4">table4</option>
</select>

 <joe-grid viewedtable="{{mytable}}"></joe-grid> 
<!--
<joe-grid></joe-grid> 
-->

JavaScript

var app = angular.module('app', []);

app.directive('joeGrid', function($compile) {
  return {
    restrict: 'E',
    template: '<h1>Hi there, it is me: {{adjective}} {{tPlace}}</h1>',
  /*  compile: function(tElem, attrs){
    	tElem.attr('viewedtable','{{mytable}}');
    	return function(scope,elem,attrs){
     
      } 
    }, */
     scope: {
      adjective: '@viewedtable'
    },
    link: function(scope, element, attrs) {
      scope.$watch(function(scope,element, attrs) {    
        console.log(scope.adjective);
        console.log('what table you are using? ' + scope.adjective);
        if (scope.adjective === "table1") {
          scope.tPlace = 'Texas';
        } else {
          scope.tPlace = 'No Place';
        }
        return scope.adjective;

      })
    }
  }
});

angular.element(document).ready(function() {
  angular.bootstrap(document, ["app"])
});