diff --git a/Docs/templates/kitchen-sink.html b/Docs/templates/kitchen-sink.html
index 603736fe..a13c49de 100644
--- a/Docs/templates/kitchen-sink.html
+++ b/Docs/templates/kitchen-sink.html
@@ -10,21 +10,21 @@ <h3 class="subheader">This is a collection of all the Foundation components.</h3
 
 ##### Accordion
 
-<div fa-accordion-set>
-  <div fa-accordion title="Test Title">
+<div zf-accordion-set>
+  <div zf-accordion title="Test Title">
     <p>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at.</p>
   </div>
-  <div fa-accordion title="Another Test">
+  <div zf-accordion title="Another Test">
     <p>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at.</p>
   </div>
 </div>
 
 ```html
-<div fa-accordion-set>
-  <div fa-accordion title="Test Title">
+<div zf-accordion-set>
+  <div zf-accordion title="Test Title">
     <p>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at.</p>
   </div>
-  <div fa-accordion title="Another Test">
+  <div zf-accordion title="Another Test">
     <p>Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at.</p>
   </div>
 </div>
@@ -232,19 +232,19 @@ <h4>The Basics: Group and Block</h4>
 ***
 
 ##### Iconic
-<img data-src="/iconic/svg/smart/account.svg" data-file-extension="CCP4" fa-iconic />
+<img data-src="/iconic/svg/smart/account.svg" data-file-extension="CCP4" zf-iconic />
 
 ***
 
 ##### Tabs
-<div fa-tabs>
-  <div fa-tab title="This is Tab 1">
+<div zf-tabs>
+  <div zf-tab title="This is Tab 1">
     <p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.</p>
   </div>
-  <div fa-tab title="Tab 2">
+  <div zf-tab title="Tab 2">
     <p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.</p>
   </div>
-  <div fa-tab title="Tab 3">
+  <div zf-tab title="Tab 3">
     <p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur.</p>
   </div>
 </div>
diff --git a/Docs/templates/page_iconic.html b/Docs/templates/page_iconic.html
index 2c56394c..1ccbddd9 100644
--- a/Docs/templates/page_iconic.html
+++ b/Docs/templates/page_iconic.html
@@ -4,4 +4,4 @@
 ---
 <h4>Iconic</h4>
 
-<img data-src="/iconic/svg/smart/account.svg" data-file-extension="CCP4" fa-iconic />
+<img data-src="/iconic/svg/smart/account.svg" data-file-extension="CCP4" zf-iconic />
diff --git a/docs/index.html b/docs/index.html
index 3825d575..b14cd4fb 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -41,18 +41,18 @@
       <!-- Title bar -->
       <div id="header" class="shrink collapse grid-content">
         <ul class="menu-bar primary condense">
-          <li fa-toggle="sidebar"><a href="#">Foundation for Apps</a></li>
+          <li zf-toggle="sidebar"><a href="#">Foundation for Apps</a></li>
         </ul>
       </div>
       <!-- /Title bar -->
       <div class="grid-block">
-        <div fa-panel id="sidebar" class="fast bounceInOut medium-3 large-2 medium-grid-block sidebar vertical">
+        <div zf-panel id="sidebar" class="fast bounceInOut medium-3 large-2 medium-grid-block sidebar vertical">
           <div class="grid-content shrink">
             This is search
           </div>
           <!-- Sidebar nav -->
           <div class="grid-content collapse">
-            <a fa-close class="close-button hide-for-medium">&times;</a>
+            <a zf-close class="close-button hide-for-medium">&times;</a>
             <section>
               <ul class="menu-bar vertical">
                 <li class="title">Setup</li>
@@ -122,7 +122,7 @@
         <!-- Main content -->
         <div class="medium-9 large-10 grid-content">
           <div class="grid-container">
-            <a class="small secondary expand button hide-for-medium" fa-toggle="sidebar">Show Components</a>
+            <a class="small secondary expand button hide-for-medium" zf-toggle="sidebar">Show Components</a>
             <div ng-class="[currentSlug, 'ui-animation']" ui-view></div>
           </div>
         </div>
diff --git a/docs/templates/page.html b/docs/templates/page.html
index 50170e57..c2db531a 100644
--- a/docs/templates/page.html
+++ b/docs/templates/page.html
@@ -17,14 +17,14 @@ <h1>Foundation Angular Playground</h1>
   </div>
   <div class="small-12 medium-8 large-9 content block docs-component-overview">
     <h1>Page</h1>
-    <button fa-open="pageModal">Modal</button>
-    <button fa-toggle="pagePanel">Panel</button>
-    <button fa-toggle="pageCanvas">Offcanvas</button>
+    <button zf-open="pageModal">Modal</button>
+    <button zf-toggle="pagePanel">Panel</button>
+    <button zf-toggle="pageCanvas">Offcanvas</button>
     <div ng-class="[currentSlug, 'ui-animation' ]" ui-view></div>
   </div>
 </div>
-<div fa-modal id="pageModal" >
-  <a href="#" fa-close>&times;</a>
+<div zf-modal id="pageModal" >
+  <a href="#" zf-close>&times;</a>
   <section class="content block">
     {{ vars.name }} | {{ vars.url }}
   </section>
@@ -33,10 +33,10 @@ <h1>Page</h1>
     <span class="button">Cancel</span>
   </footer>
 </div>
-<div fa-panel id="pagePanel" position="left">
+<div zf-panel id="pagePanel" position="left">
   <p>Test Panel</p>
 </div>
 
-<div fa-offcanvas id="pageCanvas" position="right">
+<div zf-offcanvas id="pageCanvas" position="right">
   <p>Test Canvas</p>
 </div>
diff --git a/docs/templates/page_accordion.html b/docs/templates/page_accordion.html
index 3427ac39..07d17667 100644
--- a/docs/templates/page_accordion.html
+++ b/docs/templates/page_accordion.html
@@ -6,21 +6,21 @@
 animationOut: fadeOut
 ---
 <h4>Accordion</h4>
-<div fa-accordion-set>
-  <div fa-accordion title="Test Title">
+<div zf-accordion-set>
+  <div zf-accordion title="Test Title">
     Test Content
   </div>
-  <div fa-accordion title="Another Test">
+  <div zf-accordion title="Another Test">
     Test3
   </div>
 </div>
 
 <h5>Multi selection</h5>
-<div fa-accordion-set multi-open="true">
-  <div fa-accordion title="Test Title">
+<div zf-accordion-set multi-open="true">
+  <div zf-accordion title="Test Title">
     Test Content
   </div>
-  <div fa-accordion title="Another Test">
+  <div zf-accordion title="Another Test">
     Test3
   </div>
 </div>
diff --git a/docs/templates/page_actionsheet.html b/docs/templates/page_actionsheet.html
index 68109421..e2b2114c 100644
--- a/docs/templates/page_actionsheet.html
+++ b/docs/templates/page_actionsheet.html
@@ -5,9 +5,9 @@
 animationOut: fadeOut
 ---
 <h4>Action sheet</h4>
-<div fa-action-sheet>
-  <div fa-as-button title="My button"></div>
-  <div fa-as-content position="top" class="primary">
+<div zf-action-sheet>
+  <div zf-as-button title="My button"></div>
+  <div zf-as-content position="top" class="primary">
     <p>Some html</p>
     <ul>
       <li><a href="#">Option One</a></li>
@@ -20,9 +20,9 @@ <h4>Action sheet</h4>
 
 Custom button:
 
-<div fa-action-sheet>
-  <div fa-as-button><a href="#" class="button secondary">my custom button</a></div>
-  <div fa-as-content position="top" class="dark">
+<div zf-action-sheet>
+  <div zf-as-button><a href="#" class="button secondary">my custom button</a></div>
+  <div zf-as-content position="top" class="dark">
     <p>Some html</p>
     <ul>
       <li><a href="#">Option One</a></li>
@@ -34,11 +34,11 @@ <h4>Action sheet</h4>
 <br />
 
 Remote trigger:
-<a href="#" fa-toggle="my-actionsheet">remote trigger</a>
+<a href="#" zf-toggle="my-actionsheet">remote trigger</a>
 
-<div fa-action-sheet id="my-actionsheet">
-  <div fa-as-button></div>
-  <div fa-as-content position="bottom">
+<div zf-action-sheet id="my-actionsheet">
+  <div zf-as-button></div>
+  <div zf-as-content position="bottom">
     <p>Some html</p>
     <ul>
       <li><a href="#">Option One</a></li>
diff --git a/docs/templates/page_child.html b/docs/templates/page_child.html
index 37d8bf53..6c0de542 100644
--- a/docs/templates/page_child.html
+++ b/docs/templates/page_child.html
@@ -3,12 +3,12 @@
 title: Interchange Playground
 url: /interchange
 ---
-<div fa-interchange>
-  <div fa-source media="small" src="/templates/interchange/partial_1.html">
+<div zf-interchange>
+  <div zf-source media="small" src="/templates/interchange/partial_1.html">
   </div>
-  <div fa-source media="medium" src="/templates/interchange/partial_2.html">
+  <div zf-source media="medium" src="/templates/interchange/partial_2.html">
   </div>
-  <div fa-source media="large">
+  <div zf-source media="large">
     On-page template!
   </div>
 </div>
diff --git a/docs/templates/page_notification.html b/docs/templates/page_notification.html
index 0195b32e..17a72f86 100644
--- a/docs/templates/page_notification.html
+++ b/docs/templates/page_notification.html
@@ -8,9 +8,9 @@ <h4>Notifications</h4>
   content="Notification example"
   color="success"
   position="top left"
-  fa-notify="main-notifications">Dynamic Notification</a>
-<a href="#" fa-open="my-notify">Static Notification</a>
-<div fa-notification-set id="main-notifications"></div>
-<div fa-notification-static id="my-notify" title="My static notification" image="http://placehold.it/40x40">
+  zf-notify="main-notifications">Dynamic Notification</a>
+<a href="#" zf-open="my-notify">Static Notification</a>
+<div zf-notification-set id="main-notifications"></div>
+<div zf-notification-static id="my-notify" title="My static notification" image="http://placehold.it/40x40">
   This notification is static, it works similarly to a programmatic with some subtle differences
 </div>
diff --git a/docs/templates/page_popup.html b/docs/templates/page_popup.html
index 3b4ff994..e785096c 100644
--- a/docs/templates/page_popup.html
+++ b/docs/templates/page_popup.html
@@ -3,8 +3,8 @@
 url: /popup
 ---
 <h4>Popup</h4>
-<a href="#" fa-popup-toggle="popups">Open popup</a>
-<div fa-popup
+<a href="#" zf-popup-toggle="popups">Open popup</a>
+<div zf-popup
   title="My title"
   footer="Footer!"
   id="popups"
diff --git a/docs/templates/page_tabs.html b/docs/templates/page_tabs.html
index 98a09ef3..492f11de 100644
--- a/docs/templates/page_tabs.html
+++ b/docs/templates/page_tabs.html
@@ -3,44 +3,44 @@
 url: /tabs
 ---
 <h4>Automatic Tabs</h4>
-<a href="#" fa-open="automatic-tab-3">Open tab 3</a>
-<div fa-tabs>
-  <div fa-tab title="Tab 1">
+<a href="#" zf-open="automatic-tab-3">Open tab 3</a>
+<div zf-tabs>
+  <div zf-tab title="Tab 1">
     Tab 1
   </div>
-  <div fa-tab title="Tab 2">
+  <div zf-tab title="Tab 2">
     Tab 2
   </div>
-  <div fa-tab title="Tab 3" id="automatic-tab-3">
+  <div zf-tab title="Tab 3" id="automatic-tab-3">
     Tab 3
   </div>
 </div>
 
 <h4>Automatic Tabs with displaced tab content</h4>
-<div fa-tabs id="displaced-tabs" displaced="true">
-  <div fa-tab title="Tab 1">
+<div zf-tabs id="displaced-tabs" displaced="true">
+  <div zf-tab title="Tab 1">
     Tab 1
   </div>
-  <div fa-tab title="Tab 2">
+  <div zf-tab title="Tab 2">
     Tab 2
   </div>
-  <div fa-tab title="Tab 3" id="displaced-tab-3">
+  <div zf-tab title="Tab 3" id="displaced-tab-3">
     Tab 3
   </div>
 </div>
 
-<a href="#" fa-open="displaced-tab-3">open tab 3</a>
+<a href="#" zf-open="displaced-tab-3">open tab 3</a>
 <h5>Displaced content:</h5>
-<div fa-tab-content target="displaced-tabs">
+<div zf-tab-content target="displaced-tabs">
 </div>
 
 <h4>Manually built tabs</h4>
-<a href="#" fa-open="tabTwo">Open Tab Two</a>
-<ul class="button-group" fa-tab-custom>
-  <li fa-tab-href="tabOne"><a>Tab One</a></li>
-  <li fa-tab-href="tabTwo"><a>Tab Two</a></li>
+<a href="#" zf-open="tabTwo">Open Tab Two</a>
+<ul class="button-group" zf-tab-custom>
+  <li zf-tab-href="tabOne"><a>Tab One</a></li>
+  <li zf-tab-href="tabTwo"><a>Tab Two</a></li>
 </ul>
-<div fa-tab-content-custom>
+<div zf-tab-content-custom>
   <div id="tabOne">Content!</div>
   <div id="tabTwo">Second Content!</div>
 </div>
diff --git a/js/angular/README.md b/js/angular/README.md
index 4e0e3593..b7b43d3d 100644
--- a/js/angular/README.md
+++ b/js/angular/README.md
@@ -123,11 +123,11 @@ If you are running in a subdirectory, try setting `requireBase` to the subdirect
 ###Directives
 All of the directives are supported as attribute directive so you can add them to an element like so:
 
-`<div fa-open></div>`
+`<div zf-open></div>`
 
 However, some directives allow element-level declaration like so:
 
-`<fa-accordion-set></fa-accordion-set`
+`<zf-accordion-set></zf-accordion-set`
 
 From now on, I will use the attribute declaration for directives that don't allow element declaration and use element declaration for elements that allow both.
 
@@ -184,36 +184,36 @@ If none of this makes sense, stick with `ui-sref-active-eq`
 
 Foundation has some great helpers that foster better interaction between elements.
 
-**fa-close**
-fa-close looks for a parent element that has the `fa-closeable` tag on it. This tag is added automatically for all directives that can be closed with `fa-close`. When clicked, the directive will send a message via the FoundationApi to close its parent `fa-closeable` element.
+**zf-close**
+zf-close looks for a parent element that has the `zf-closeable` tag on it. This tag is added automatically for all directives that can be closed with `zf-close`. When clicked, the directive will send a message via the FoundationApi to close its parent `zf-closeable` element.
 
 ````html
-<fa-modal id="pageModal">
-  <a href="#" fa-close>&times;</a>
-</fa-modal>
+<zf-modal id="pageModal">
+  <a href="#" zf-close>&times;</a>
+</zf-modal>
 ````
 
 Note that you can specify the ID of a specific closeable directive in order to close it remotely (whether it's a parent, child, or has any other relationship to the closeable directive).
 
 ````html
-<a href="#" fa-close="pageModal">&times;</a>
-<fa-modal id="pageModal"></fa-modal>
+<a href="#" zf-close="pageModal">&times;</a>
+<zf-modal id="pageModal"></zf-modal>
 ````
 
-**fa-open**
-The counter to `fa-close`, `fa-open` sends a signal to a directive that can be trigger through this method. Simply specify the ID of the target element.
+**zf-open**
+The counter to `zf-close`, `zf-open` sends a signal to a directive that can be trigger through this method. Simply specify the ID of the target element.
 
 ````html
-<a href="#" fa-open="pageModal">Open Modal</a>
-<fa-modal id="pageModal"></fa-modal>
+<a href="#" zf-open="pageModal">Open Modal</a>
+<zf-modal id="pageModal"></zf-modal>
 ````
 
-**fa-toggle**
-Similar to the previous two, `fa-toggle` sends a toggle command to a directive that can accept it. A target has to be specified in order for it to work.
+**zf-toggle**
+Similar to the previous two, `zf-toggle` sends a toggle command to a directive that can accept it. A target has to be specified in order for it to work.
 
 ````html
-<a href="#" fa-toggle="pageModal">Toggle Modal</a>
-<fa-modal id="pageModal"></fa-modal>
+<a href="#" zf-toggle="pageModal">Toggle Modal</a>
+<zf-modal id="pageModal"></zf-modal>
 ````
 
 Please see documentation on the FoundationApi to learn how to open, close, toggle, and trigger other events programmatically.
@@ -223,12 +223,12 @@ Please see documentation on the FoundationApi to learn how to open, close, toggl
 Structure:
 
 ````html
-<fa-accordion-set>
-  <fa-accordion
+<zf-accordion-set>
+  <zf-accordion
     title="Input your title here">
     Content goes here
-  </fa-accordion>
-</fa-accordion-set>
+  </zf-accordion>
+</zf-accordion-set>
 ````
 
 ####Actionsheet
@@ -237,48 +237,48 @@ Actionsheets allow users to specify some options on top of showing a regular act
 Using the most default settings, an actionsheet looks like this:
 
 ````html
-<fa-action-sheet>
-  <fa-as-button title="My button"></fa-as-button>
-  <fa-as-content position="bottom">
+<zf-action-sheet>
+  <zf-as-button title="My button"></zf-as-button>
+  <zf-as-content position="bottom">
     My content goes here
-  </fa-as-content>
-</fa-action-sheet>
+  </zf-as-content>
+</zf-action-sheet>
 ````
 
-To use a custom buttom, ammend the `fa-as-button` declaration with your custom HTML like so:
+To use a custom buttom, ammend the `zf-as-button` declaration with your custom HTML like so:
 
 ````html
-<fa-as-button>my button goes here</fa-as-button>
+<zf-as-button>my button goes here</zf-as-button>
 ````
 
 There is also an option to remotely open an actionsheet; however, the actionsheet won't show up under the remote trigger but rather where it had already been placed.
 
 ````html
-<a href="#" fa-toggle="my-actionsheet">toggle</a>
-<fa-action-sheet id="my-actionsheet">
-  <fa-as-button title="My button"></fa-as-button>
-  <fa-as-content position="bottom">
+<a href="#" zf-toggle="my-actionsheet">toggle</a>
+<zf-action-sheet id="my-actionsheet">
+  <zf-as-button title="My button"></zf-as-button>
+  <zf-as-content position="bottom">
     My content goes here
-  </fa-as-content>
-</fa-action-sheet>
+  </zf-as-content>
+</zf-action-sheet>
 ````
 
 ####Interchange
 Interchange allows you to specify what specific content to view based on a media query. The last query to match will be shown.
 
-Because of some cool angular features, you're welcome to either specify the content right away (without including `src`) or, you can specify a partial to be loaded. Loading is done lazily, meaning that even with 20 different `fa-source` declarations, only the correct one will load for the current media query. So if you're on mobile, only the mobile partial will load up.
+Because of some cool angular features, you're welcome to either specify the content right away (without including `src`) or, you can specify a partial to be loaded. Loading is done lazily, meaning that even with 20 different `zf-source` declarations, only the correct one will load for the current media query. So if you're on mobile, only the mobile partial will load up.
 
 Note that partials do not get RELOADED, meaning that as long as the user is on the page, the various partials will be cached.
 
 Structure:
 
 ````html
-<fa-interchange>
-  <div fa-source media="media type such as 'small'" src="/path/to/partial"></div>
-  <div fa-source media="large">
+<zf-interchange>
+  <div zf-source media="media type such as 'small'" src="/path/to/partial"></div>
+  <div zf-source media="large">
     Page template
   </div>
-</fa-interchange>
+</zf-interchange>
 
 ````
 
@@ -288,17 +288,17 @@ The modal does not require any specific content within it; however, the example
 Structure:
 
 ````html
-<a href="#" fa-open="pageModal">Open modal</a>
-<fa-modal id="pageModal">
-  <a href="#" fa-close>&times;</a>
+<a href="#" zf-open="pageModal">Open modal</a>
+<zf-modal id="pageModal">
+  <a href="#" zf-close>&times;</a>
   <section class="content block">
     content goes here
   </section>
   <footer class="content block menu-bar">
-    <span class="button" fa-close>Ok</span>
-    <span class="button" fa-close>Cancel</span>
+    <span class="button" zf-close>Ok</span>
+    <span class="button" zf-close>Cancel</span>
   </footer>
-<fa-modal>
+<zf-modal>
 ````
 
 ####Notification
@@ -308,11 +308,11 @@ There are two ways to access a notification. Via the static method and the progr
 The static method is best used for prototyping since it doesn't involve any programming.
 
 ````html
-<a href="#" fa-open="my-notification">Static notification</a>
-<fa-notification-static id="my-notify"
+<a href="#" zf-open="my-notification">Static notification</a>
+<zf-notification-static id="my-notify"
   title="My static notification">
   Content goes here
-</fa-notification-static>
+</zf-notification-static>
 ````
 
 **Programmatic Method**
@@ -321,7 +321,7 @@ The FoundationApi service is a pretty useful service, one function of it is to s
 To use it, create a notification set like so:
 
 ````html
-<fa-notification-set id="main-notifications"></fa-notification-set>
+<zf-notification-set id="main-notifications"></zf-notification-set>
 ````
 
 And then send it a notification with via FoundationApi:
@@ -330,10 +330,10 @@ And then send it a notification with via FoundationApi:
 foundationApi.publish('main-notifications', { title: 'Test', content: 'Test2' });
 ````
 
-You can also use the `fa-notify` directive for simpler messages and prototyping:
+You can also use the `zf-notify` directive for simpler messages and prototyping:
 
 ````html
-<a href="#" fa-notify title="Title of notification" content="Content of notification">Launch notification</a>
+<a href="#" zf-notify title="Title of notification" content="Content of notification">Launch notification</a>
 ````
 
 **Additional options**
@@ -347,29 +347,29 @@ On top of setting a title and content, you can also set:
 ####Off Canvas
 
 ````html
-<a href="#" fa-open="pageCanvas">open offcanvas</a>
-<fa-offcanvas id="pageCanvas" position="right">
+<a href="#" zf-open="pageCanvas">open offcanvas</a>
+<zf-offcanvas id="pageCanvas" position="right">
   <p>My content!</p>
-</fa-offcanvas>
+</zf-offcanvas>
 ````
 
 ####Panel
 
 ````html
-<a href="#" fa-open="pagePanel">open panel</a>
-<fa-panel id="pagePanel" position="left"></fa-panel>
+<a href="#" zf-open="pagePanel">open panel</a>
+<zf-panel id="pagePanel" position="left"></zf-panel>
 ````
 
 ####Popup
 Popups use a library called Tether. Tether attaches an element to another element with absolute positioning; however, there is one caveat. If your popup is nested within a scrollable area (not `body`) but it's not the immediate parent of that element, it will lose its positioning.
 
 ````html
-<a href="#" fa-popup-toggle="popups">Open Popup</a>
-<fa-popup
+<a href="#" zf-popup-toggle="popups">Open Popup</a>
+<zf-popup
   title="My title"
   footer="Footer content"
   id="my-popup"
->Content goes here</fa-popup>
+>Content goes here</zf-popup>
 ````
 
 ####Tabs
@@ -378,30 +378,30 @@ Tabs can get a little complicated; however, they also allow for meo flexibility.
 **default use**
 
 ````html
-<fa-tabs>
-  <fa-tab title="This is my tab">
+<zf-tabs>
+  <zf-tab title="This is my tab">
     Tab content goes here
-  </fa-tab>
-  <fa-tab title="This is my tab">
+  </zf-tab>
+  <zf-tab title="This is my tab">
     Tab content goes here
-  </fa-tab>
-</fa-tabs>
+  </zf-tab>
+</zf-tabs>
 ````
 
 **displaced use**
-Displaced tabs allow us to build tabs (tab navigation) and display the content elsewhere with `fa-tab-content`
+Displaced tabs allow us to build tabs (tab navigation) and display the content elsewhere with `zf-tab-content`
 
 ````html
-<fa-tabs id="displaced-tabs" displaced="true">
-  <fa-tab title="This is my tab">
+<zf-tabs id="displaced-tabs" displaced="true">
+  <zf-tab title="This is my tab">
     Tab content goes here
-  </fa-tab>
-  <fa-tab title="This is my tab">
+  </zf-tab>
+  <zf-tab title="This is my tab">
     Tab content goes here
-  </fa-tab>
-</fa-tabs>
+  </zf-tab>
+</zf-tabs>
 
-<fa-tab-content target="displaced-tabs"></fa-tab-content>
+<zf-tab-content target="displaced-tabs"></zf-tab-content>
 ````
 
 **manual use**
@@ -410,16 +410,16 @@ Manual usage allows for custom styling and full versatility while retaining the
 Here's what a custom menu may look like:
 
 ````html
-<ul class="button-group" fa-tab-custom>
-  <li fa-tab-href="tabOne">Tab One</li>
-  <li fa-tab-href="tabTwo">Tab Two</li>
+<ul class="button-group" zf-tab-custom>
+  <li zf-tab-href="tabOne">Tab One</li>
+  <li zf-tab-href="tabTwo">Tab Two</li>
 </ul>
 ````
 
-The directives `fa-tab-custom` and `fa-tab-href` ensure typical tab button behavior where active tab button gets an `is-active` class. `fa-tab-href` should point to an ID of a tab.
+The directives `zf-tab-custom` and `zf-tab-href` ensure typical tab button behavior where active tab button gets an `is-active` class. `zf-tab-href` should point to an ID of a tab.
 
 ````html
-<div fa-tab-content-custom>
+<div zf-tab-content-custom>
   <div id="tabOne">Content!</div>
   <div id="tabTwo">Second content!</div>
 </div>
@@ -435,7 +435,7 @@ Here's an example:
 
 ````html
 <!-- a directive placed in HTML -->
-<fa-modal id="my-modal"></fa-modal>
+<zf-modal id="my-modal"></zf-modal>
 ````
 
 The modal will automatically register itself as a subscriber in the FoundationApi under `my-modal`. The code for the directive indicates that it listens for 3 different messages: `open`, `close`, and `toggle` as well as aliases for the former two `show` and `hide`.
@@ -448,12 +448,12 @@ foundationApi.publish('my-modal', 'open');
 
 Make sure to include FoundationApi as a dependency in the controller or wherever else you want to use it. The best bet to hooking into various directives is to check the code and see what each directive subscribes to.
 
-In fact, the directives `fa-close`, `fa-open`, and `fa-toggle` are wrappers for FoundationApi events.
+In fact, the directives `zf-close`, `zf-open`, and `zf-toggle` are wrappers for FoundationApi events.
 
 ###Building your own app
 
 Most of the modules are dependent on the `foundation.common.services` module but outside of that, they're portable. You're welcome to take them and use them as you need to; however, there are some things to know about:
 
-- any and all helpers such as `fa-open` and `fa-close` are packaged in the `foundation.common.directives` module so if there is a need for them, require the module.
+- any and all helpers such as `zf-open` and `zf-close` are packaged in the `foundation.common.directives` module so if there is a need for them, require the module.
 - the `app.js` file which bootstraps the application can be fully bypassed so you can build your own. Make sure to use proper dependency injection for the modules you DO want to use.
 - if you install the repo as part of bower, make sure to reference all the right files in your build process in your Gulpfile
diff --git a/js/angular/common/common.directives.js b/js/angular/common/common.directives.js
index dd6f92b3..e47530ce 100644
--- a/js/angular/common/common.directives.js
+++ b/js/angular/common/common.directives.js
@@ -1,7 +1,7 @@
 angular.module('foundation.common.directives', []);
 
 angular.module('foundation.common.directives')
-  .directive('faClose', ['FoundationApi', function(foundationApi) {
+  .directive('zfClose', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'A',
     link: function(scope, element, attrs) {
@@ -9,12 +9,12 @@ angular.module('foundation.common.directives')
       var tempElement = element.parent();
 
       //find parent modal
-      while(parentElement == false) {
+      while(parentElement === false) {
         if(tempElement[0].nodeName == 'BODY') {
           parentElement = '';
         }
 
-        if(typeof tempElement.attr('fa-closable') !== 'undefined' && tempElement.attr('fa-closable') !== false) {
+        if(typeof tempElement.attr('zf-closable') !== 'undefined' && tempElement.attr('zf-closable') !== false) {
           parentElement = tempElement;
         }
 
@@ -26,29 +26,29 @@ angular.module('foundation.common.directives')
         e.preventDefault();
       });
     }
-  }
+  };
 }]);
 
 angular.module('foundation.common.directives')
-  .directive('faOpen', ['FoundationApi', function(foundationApi) {
+  .directive('zfOpen', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'A',
     link: function(scope, element, attrs) {
       element.on('click', function(e) {
-        foundationApi.publish(attrs.faOpen, 'open');
+        foundationApi.publish(attrs.zfOpen, 'open');
         e.preventDefault();
       });
     }
-  }
+  };
 }]);
 
 angular.module('foundation.common.directives')
-  .directive('faToggle', ['FoundationApi', function(foundationApi) {
+  .directive('zfToggle', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'A',
     link: function(scope, element, attrs) {
       element.on('click', function(e) {
-        foundationApi.publish(attrs.faToggle, 'toggle');
+        foundationApi.publish(attrs.zfToggle, 'toggle');
         e.preventDefault();
       });
     }
diff --git a/js/angular/common/common.services.js b/js/angular/common/common.services.js
index de802b33..731de311 100644
--- a/js/angular/common/common.services.js
+++ b/js/angular/common/common.services.js
@@ -38,7 +38,7 @@ angular.module('foundation.common.services')
 
         //little trick to produce semi-random IDs
         do {
-          uuid += 'fa-uuid-';
+          uuid += 'zf-uuid-';
           for (var i=0; i<15; i++) {
             uuid += Math.floor(Math.random()*16).toString(16);
           }
@@ -70,7 +70,7 @@ angular.module('foundation.common.services')
         return function () {
           var context = this, args = arguments;
 
-          if (timer == null) {
+          if (timer === null) {
             timer = setTimeout(function () {
               func.apply(context, args);
               timer = null;
diff --git a/js/angular/directives/accordion.js b/js/angular/directives/accordion.js
index 8ec1c95e..f6d70292 100644
--- a/js/angular/directives/accordion.js
+++ b/js/angular/directives/accordion.js
@@ -1,7 +1,7 @@
 angular.module('foundation.accordion', []);
 
 angular.module('foundation.accordion')
-  .controller('FaAccordionController', ['$scope', function($scope) {
+  .controller('ZfAccordionController', ['$scope', function($scope) {
     var controller = this;
     var sections = controller.sections = $scope.sections = [];
     var multiOpen = controller.multiOpen = false;
@@ -39,13 +39,13 @@ angular.module('foundation.accordion')
 }]);
 
 angular.module('foundation.accordion')
-  .directive('faAccordionSet', function() {
+  .directive('zfAccordionSet', function() {
   return {
     restrict: 'EA',
     transclude: 'true',
     replace: true,
     templateUrl: '/partials/accordion-set.html',
-    controller: 'FaAccordionController',
+    controller: 'ZfAccordionController',
     scope: {
       multiOpen: '@'
     },
@@ -56,7 +56,7 @@ angular.module('foundation.accordion')
 });
 
 angular.module('foundation.accordion')
-  .directive('faAccordion', function() {
+  .directive('zfAccordion', function() {
     return {
       restrict: 'EA',
       templateUrl: '/partials/accordion.html',
@@ -64,7 +64,7 @@ angular.module('foundation.accordion')
       scope: {
         title: '@'
       },
-      require: '^faAccordionSet',
+      require: '^zfAccordionSet',
       replace: true,
       controller: function() {},
       link: function(scope, element, attrs, controller, transclude) {
diff --git a/js/angular/directives/actionsheet.js b/js/angular/directives/actionsheet.js
index 551c9ce9..0a23cb3e 100644
--- a/js/angular/directives/actionsheet.js
+++ b/js/angular/directives/actionsheet.js
@@ -1,7 +1,7 @@
 angular.module('foundation.actionsheet', ['foundation.common.services']);
 
 angular.module('foundation.actionsheet')
-  .controller('FaActionSheetController', ['$scope', 'FoundationApi', function($scope, foundationApi) {
+  .controller('ZfActionSheetController', ['$scope', 'FoundationApi', function($scope, foundationApi) {
     var controller = this;
     var content = controller.content = $scope.content;
 
@@ -18,14 +18,15 @@ angular.module('foundation.actionsheet')
 }]);
 
 angular.module('foundation.actionsheet')
-  .directive('faActionSheet', ['FoundationApi', function(foundationApi) {
+  .directive('zfActionSheet', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'A',
     transclude: true,
     replace: true,
     templateUrl: '/partials/actionsheet.html',
-    controller: 'FaActionSheetController',
+    controller: 'ZfActionSheetController',
     link: function(scope, element, attrs, controller) {
+      attrs.$set('zf-closable', 'actionsheet');
       foundationApi.subscribe(attrs.id, function(msg) {
         if (msg == 'toggle') {
           controller.toggle();
@@ -38,19 +39,19 @@ angular.module('foundation.actionsheet')
 }]);
 
 angular.module('foundation.actionsheet')
-  .directive('faAsContent', ['FoundationApi', function(foundationApi) {
+  .directive('zfAsContent', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'EA',
     transclude: true,
     replace: true,
     templateUrl: '/partials/actionsheet-content.html',
-    require: '^faActionSheet',
+    require: '^zfActionSheet',
     scope: {
-      position: '@?'
+      position: '@?'

     },
     link: function(scope, element, attrs, controller) {
       scope.active = false;
-      scope.position = scope.position || 'bottom';
+      scope.position = scope.position || 'bottom';

       controller.registerContent(scope);
 
       scope.toggle = function() {
@@ -62,13 +63,13 @@ angular.module('foundation.actionsheet')
 }]);
 
 angular.module('foundation.actionsheet')
-  .directive('faAsButton', ['FoundationApi', function(foundationApi) {
+  .directive('zfAsButton', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'EA',
     transclude: true,
     replace: true,
     templateUrl: '/partials/actionsheet-button.html',
-    require: '^faActionSheet',
+    require: '^zfActionSheet',
     scope: {
       title: '@?'
     },
diff --git a/js/angular/directives/iconic.js b/js/angular/directives/iconic.js
index bf25e99d..fdd91400 100644
--- a/js/angular/directives/iconic.js
+++ b/js/angular/directives/iconic.js
@@ -13,7 +13,7 @@ angular.module('foundation.iconic')
 });
 
 angular.module('foundation.iconic')
-  .directive('faIconic', ['Iconic', function(iconic) {
+  .directive('zfIconic', ['Iconic', function(iconic) {
   return {
     restrict: 'A',
     link: function(scope, element, attrs, controller) {
diff --git a/js/angular/directives/interchange.js b/js/angular/directives/interchange.js
index df765925..ae5dd523 100644
--- a/js/angular/directives/interchange.js
+++ b/js/angular/directives/interchange.js
@@ -1,7 +1,7 @@
 angular.module('foundation.interchange', ['foundation.common.services']);
 
 angular.module('foundation.interchange')
-  .directive('faInterchange', ['FoundationApi', '$compile', '$http', '$templateCache', '$animate',  function(foundationApi, $compile, $http, $templateCache) {
+  .directive('zfInterchange', ['FoundationApi', '$compile', '$http', '$templateCache', '$animate',  function(foundationApi, $compile, $http, $templateCache) {
   var templateLoader = function(templateUrl) {
     return $http.get(templateUrl, {cache: $templateCache});
   };
diff --git a/js/angular/directives/modal.js b/js/angular/directives/modal.js
index 3e92a0bf..f0eab4f4 100644
--- a/js/angular/directives/modal.js
+++ b/js/angular/directives/modal.js
@@ -1,7 +1,7 @@
 angular.module('foundation.modal', ['foundation.common.services']);
 
 angular.module('foundation.modal')
-  .directive('faModal', ['FoundationApi', function(foundationApi) {
+  .directive('zfModal', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'EA',
     templateUrl: '/partials/modal.html',
@@ -13,7 +13,7 @@ angular.module('foundation.modal')
 
       return {
         pre: function preLink(scope, iElement, iAttrs, controller) {
-          iAttrs.$set('fa-closable', type);
+          iAttrs.$set('zf-closable', type);
         },
         post: function postLink(scope, element, attrs) {
           var dialog = angular.element(element.children()[0]);
diff --git a/js/angular/directives/notification.js b/js/angular/directives/notification.js
index caa280b3..9547c4fb 100644
--- a/js/angular/directives/notification.js
+++ b/js/angular/directives/notification.js
@@ -1,7 +1,7 @@
 angular.module('foundation.notification', ['foundation.common.services']);
 
 angular.module('foundation.notification')
-  .controller('FaNotificationController', ['$scope', 'FoundationApi', function FaTabsController($scope, foundationApi) {
+  .controller('ZfNotificationController', ['$scope', 'FoundationApi', function ZfTabsController($scope, foundationApi) {
     var controller    = this;
     var notifications = controller.notifications = $scope.notifications = [];
 
@@ -27,11 +27,11 @@ angular.module('foundation.notification')
 }]);
 
 angular.module('foundation.notification')
-  .directive('faNotificationSet', ['FoundationApi', function(foundationApi) {
+  .directive('zfNotificationSet', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'EA',
     templateUrl: '/partials/notification-set.html',
-    controller: 'FaNotificationController',
+    controller: 'ZfNotificationController',
     link:function(scope, element, attrs, controller) {
       foundationApi.subscribe(attrs.id, function(msg) {
         if(msg === 'clearall') {
@@ -48,13 +48,13 @@ angular.module('foundation.notification')
 }]);
 
 angular.module('foundation.notification')
-  .directive('faNotification', function() {
+  .directive('zfNotification', function() {
   return {
     restrict: 'EA',
     templateUrl: '/partials/notification.html',
     replace: true,
     transclude: true,
-    require: '^faNotificationSet',
+    require: '^zfNotificationSet',
     controller: function() { },
     scope: {
       title: '=?',
@@ -66,7 +66,9 @@ angular.module('foundation.notification')
     },
     link: function(scope, element, attrs, controller) {
       scope.active = false;
-      scope.position = scope.position ? scope.position.split(' ').join('-') : 'top-right';
+      scope.position = scope.position ? scope.position.split(' ').join('-') : 'top-right';

+
+      attrs.$set('zf-closable', 'notification');
 
       //allow DOM to change before activating
       setTimeout(function() {
@@ -85,7 +87,7 @@ angular.module('foundation.notification')
 });
 
 angular.module('foundation.notification')
-  .directive('faNotificationStatic', ['FoundationApi', function(foundationApi) {
+  .directive('zfNotificationStatic', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'EA',
     templateUrl: '/partials/notification.html',
@@ -99,7 +101,7 @@ angular.module('foundation.notification')
       color: '@?'
     },
     link: function(scope, element, attrs, controller) {
-      scope.position = scope.position ? scope.position.split(' ').join('-') : '';
+      scope.position = scope.position ? scope.position.split(' ').join('-') : 'top-right';
 
       foundationApi.subscribe(attrs.id, function(msg) {
         if(msg == 'show' || msg == 'open') {
@@ -137,7 +139,7 @@ angular.module('foundation.notification')
 }]);
 
 angular.module('foundation.notification')
-  .directive('faNotify', ['FoundationApi', function(foundationApi) {
+  .directive('zfNotify', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'A',
     scope: {
@@ -150,7 +152,7 @@ angular.module('foundation.notification')
     link: function(scope, element, attrs, controller) {
       element.on('click', function(e) {
         e.preventDefault();
-        foundationApi.publish(attrs.faNotify, { title: scope.title, content: scope.content, position: scope.position, color: scope.color });
+        foundationApi.publish(attrs.zfNotify, { title: scope.title, content: scope.content, position: scope.position, color: scope.color });
       });
     },
   };
diff --git a/js/angular/directives/offcanvas.js b/js/angular/directives/offcanvas.js
index 14887470..0aee7c18 100644
--- a/js/angular/directives/offcanvas.js
+++ b/js/angular/directives/offcanvas.js
@@ -1,13 +1,13 @@
 angular.module('foundation.offcanvas', ['foundation.common.services']);
 
 angular.module('foundation.offcanvas')
-  .directive('faOffcanvas', ['FoundationApi', function(foundationApi) {
+  .directive('zfOffcanvas', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'EA',
     templateUrl: '/partials/offcanvas.html',
     transclude: true,
     scope: {
-      position: '@?'
+      position: '@'
     },
     replace: true,
     compile: function compile(tElement, tAttrs, transclude) {
@@ -15,11 +15,11 @@ angular.module('foundation.offcanvas')
 
       return {
         pre: function preLink(scope, iElement, iAttrs, controller) {
-          iAttrs.$set('fa-closable', type);
+          iAttrs.$set('zf-closable', type);
           document.body.classList.add('has-off-canvas');
         },
         post: function postLink(scope, element, attrs) {
-          scope.position = scope.position || 'left';
+          scope.position = scope.position || 'left';

           scope.active = false;
 
           //setup
diff --git a/js/angular/directives/panel.js b/js/angular/directives/panel.js
index 0f80bec7..ee078b59 100644
--- a/js/angular/directives/panel.js
+++ b/js/angular/directives/panel.js
@@ -1,13 +1,13 @@
 angular.module('foundation.panel', ['foundation.common.services']);
 
 angular.module('foundation.panel')
-  .directive('faPanel', ['FoundationApi', function(foundationApi) {
+  .directive('zfPanel', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'EA',
     templateUrl: '/partials/panel.html',
     transclude: true,
     scope: {
-      position: '@?'
+      position: '@?'

     },
     replace: true,
     compile: function compile(tElement, tAttrs, transclude) {
@@ -15,10 +15,10 @@ angular.module('foundation.panel')
 
       return {
         pre: function preLink(scope, iElement, iAttrs, controller) {
-          iAttrs.$set('fa-closable', type);
+          iAttrs.$set('zf-closable', type);
         },
         post: function postLink(scope, element, attrs) {
-          scope.position = scope.position || 'left';
+          scope.position = scope.position || 'left';

           scope.active = false;
 
           //setup
diff --git a/js/angular/directives/popup.js b/js/angular/directives/popup.js
index 107c0230..00d454a9 100644
--- a/js/angular/directives/popup.js
+++ b/js/angular/directives/popup.js
@@ -1,7 +1,7 @@
 angular.module('foundation.popup', ['foundation.common.services']);
 
 angular.module('foundation.popup')
-  .directive('faPopup', ['FoundationApi', function(foundationApi) {
+  .directive('zfPopup', ['FoundationApi', function(foundationApi) {
     return {
       transclude: true,
       replace: true,
@@ -15,6 +15,7 @@ angular.module('foundation.popup')
       link: function(scope, element, attrs) {
         scope.active = false;
         scope.target = scope.target || false;
+        attrs.$set('zf-closeable', 'popup');
 
         var attachment = scope.pinTo || 'top center';
         var tetherInit = false;
@@ -85,11 +86,11 @@ angular.module('foundation.popup')
 }]);
 
 angular.module('foundation.popup')
-  .directive('faPopupToggle', ['FoundationApi', function(foundationApi) {
+  .directive('zfPopupToggle', ['FoundationApi', function(foundationApi) {
     return {
       restrict: 'A',
       link: function(scope, element, attrs) {
-        var target = attrs.faPopupToggle;
+        var target = attrs.zfPopupToggle;
         var id = attrs.id || foundationApi.generateUuid();
         attrs.$set('id', id);
 
diff --git a/js/angular/directives/tabs.js b/js/angular/directives/tabs.js
index e46da126..3063e1b4 100644
--- a/js/angular/directives/tabs.js
+++ b/js/angular/directives/tabs.js
@@ -1,7 +1,7 @@
 angular.module('foundation.tabs', ['foundation.common.services']);
 
 angular.module('foundation.tabs')
-  .controller('FaTabsController', ['$scope', 'FoundationApi', function FaTabsController($scope, foundationApi) {
+  .controller('ZfTabsController', ['$scope', 'FoundationApi', function ZfTabsController($scope, foundationApi) {
     var controller = this;
     var tabs       = controller.tabs = $scope.tabs = [];
     var id         = '';
@@ -18,6 +18,8 @@ angular.module('foundation.tabs')
           tab.scope.active = true;
         }
       });
+
+      $scope.$apply();
     };
 
     controller.addTab = function addTab(tabScope) {
@@ -39,13 +41,13 @@ angular.module('foundation.tabs')
 }]);
 
 angular.module('foundation.tabs')
-  .directive('faTabs', ['FoundationApi', function(foundationApi) {
+  .directive('zfTabs', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'EA',
     transclude: 'true',
     replace: true,
     templateUrl: '/partials/tabs.html',
-    controller: 'FaTabsController',
+    controller: 'ZfTabsController',
     scope: {
       displaced: '@?'
     },
@@ -74,7 +76,7 @@ angular.module('foundation.tabs')
 }]);
 
 angular.module('foundation.tabs')
-  .directive('faTabContent', ['FoundationApi', function(foundationApi) {
+  .directive('zfTabContent', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'A',
     transclude: 'true',
@@ -117,7 +119,7 @@ angular.module('foundation.tabs')
 }]);
 
 angular.module('foundation.tabs')
-  .directive('faTab', ['FoundationApi', function(foundationApi) {
+  .directive('zfTab', ['FoundationApi', function(foundationApi) {
     return {
       restrict: 'EA',
       templateUrl: '/partials/tab.html',
@@ -125,7 +127,7 @@ angular.module('foundation.tabs')
       scope: {
         title: '@'
       },
-      require: '^faTabs',
+      require: '^zfTabs',
       replace: true,
       link: function(scope, element, attrs, controller, transclude) {
         scope.id = attrs.id || foundationApi.generateUuid();
@@ -147,7 +149,7 @@ angular.module('foundation.tabs')
 }]);
 
 angular.module('foundation.tabs')
-  .directive('faTabIndividual', ['FoundationApi', function(foundationApi) {
+  .directive('zfTabIndividual', ['FoundationApi', function(foundationApi) {
     return {
       restrict: 'EA',
       transclude: 'true',
@@ -169,12 +171,12 @@ angular.module('foundation.tabs')
 
 //custom tabs
 angular.module('foundation.tabs')
-  .directive('faTabHref', ['FoundationApi', function(foundationApi) {
+  .directive('zfTabHref', ['FoundationApi', function(foundationApi) {
     return {
       restrict: 'A',
       replace: false,
       link: function postLink(scope, element, attrs, ctrl) {
-        var target = attrs.faTabHref;
+        var target = attrs.zfTabHref;
 
         var makeActive = function() {
           element.parent().children().removeClass('is-active');
@@ -198,7 +200,7 @@ angular.module('foundation.tabs')
 }]);
 
 angular.module('foundation.tabs')
-  .directive('faTabCustom', ['FoundationApi', function(foundationApi) {
+  .directive('zfTabCustom', ['FoundationApi', function(foundationApi) {
     return {
       restrict: 'A',
       replace: false,
@@ -210,7 +212,7 @@ angular.module('foundation.tabs')
 }]);
 
 angular.module('foundation.tabs')
-  .directive('faTabContentCustom', ['FoundationApi', function(foundationApi) {
+  .directive('zfTabContentCustom', ['FoundationApi', function(foundationApi) {
   return {
     restrict: 'A',
     link: function(scope, element, attrs) {
diff --git a/js/angular/partials/notification-set.html b/js/angular/partials/notification-set.html
index 20c722ca..0a1b94bf 100644
--- a/js/angular/partials/notification-set.html
+++ b/js/angular/partials/notification-set.html
@@ -1,8 +1,8 @@
-<fa-notification ng-repeat="notification in notifications"
+<zf-notification ng-repeat="notification in notifications"
   title="notification.title"
   img="notification.image"
   notif-id = "notification.id"
   color="notification.color"
   position="notification.position"
-  >{{ notification.content }}</fa-notification>
+  >{{ notification.content }}</zf-notification>
 
diff --git a/js/angular/partials/tab-content.html b/js/angular/partials/tab-content.html
index e9a49bda..200af42e 100644
--- a/js/angular/partials/tab-content.html
+++ b/js/angular/partials/tab-content.html
@@ -1,4 +1,4 @@
 <div class="tab-contents">
-  <div fa-tab-individual ng-repeat="tab in tabs" tab="tab" class="tab-content" ng-class="{'is-active': tab.active}">
+  <div zf-tab-individual ng-repeat="tab in tabs" tab="tab" class="tab-content" ng-class="{'is-active': tab.active}">
   </div>
 </div>
diff --git a/js/angular/partials/tabs.html b/js/angular/partials/tabs.html
index a213db2a..32d99afa 100644
--- a/js/angular/partials/tabs.html
+++ b/js/angular/partials/tabs.html
@@ -1,6 +1,6 @@
 <div>
   <div class="tabs" ng-transclude>
   </div>
-  <div fa-tab-content target="{{ id }}" ng-if="showTabContent">
+  <div zf-tab-content target="{{ id }}" ng-if="showTabContent">
   </div>
 </div>