javascript - Add attribute to my angularjs custom directive and lets its value listen to same directive model -

i have created custom directive, want directive attribute injected , elements within directive change directive's attribute values. here's code:

ultimately want directive this:

<joe-grid viewedtable="table1"></joe-grid> 

table1, table2 etc.. change based on selected option dropdown.

var app = angular.module('app', []);    app.directive('joegrid', function() {    return {      restrict: 'e',      template: '<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><h1>hi there, me: {{adjective}}  </h1>',      scope: {        adjective: '@viewedtable',      },      link: function(scope, element, attrs) {        attrs.$set('viewedtable', '{{mytable}}');        // want viewtable attribute equal ng-model=mytable       }    }  });    angular.element(document).ready(function() {    angular.bootstrap(document, ["app"])  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <joe-grid></joe-grid>