Creating Menubar using Angularjs 1.5
$scope.navigationTabs = [
  new NAV("file","/file","File","fa fa-file-o", "active"),
  ...
]


All this piece of code does is define an instance of a NAV with the specified properties. It's not sharing methods, no inheritance, making the use of a constructor overkill. This is no different from doing: 

$scope.navigationTabs = [
{ id: "file", key: "/file", value: "File", icon: "fa fa-file-o", active: "active" }


The above method throws away the need for a constructor, names your properties verbosely, and order of appearance doesn't matter. If you want defaults, a factory function that merges your object with a default one does the same thing. It may just be replacing your constructor, but you still keep the perks of using an object.

function createNav(settings){
  return Object.assign({
    // defaults here
  }, settings);
}


Taking this further, you can just store the objects in an array, and run map through it to create the tabs. This way, you avoid always calling the function and concentrate on just the data.

var navItems = [
  { id: "file", key: "/file", value: "File", icon: "fa fa-file-o", active: "active" },
  ....
];

$scope.navigationTabs = navItems.map(createNav);




console.log("navigating to url: " + nav.key);


Consider avoiding console.log when debugging. Use the browser's developer tools instead. Should you really want to log, use Angular's $log service as it safely detects the presence of console.



I would recommend that the directive be like a standalone component and written like:

&lt;menu-bar menu-items="someVarWithMenuItems"&gt;&lt;/menu-bar&gt;


In this manner, you make the directive portable, letting the enclosing controller decide what the menu items are. Another idea would be to have another directive and let the consumer write it this way:

&lt;menu-bar&gt;
  &lt;menu-item ...props...&gt;tab text&lt;/menu-item&gt;
  &lt;menu-item ...props...&gt;tab text&lt;/menu-item&gt;
  &lt;menu-item ...props...&gt;tab text&lt;/menu-item&gt;
&lt;/menu-bar&gt;


This way, you can just let the consumer drop in the scripts and not have to worry about them. They can just declare the tabs in the markup.