diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 2ff87100a..cf579627b 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -60,6 +60,7 @@
 //= require legislation_annotatable
 //= require watch_form_changes
 //= require followable
+//= require flaggable
 //= require documentable
 //= require tree_navigator
 //= require custom
diff --git a/app/assets/javascripts/flaggable.js.coffee b/app/assets/javascripts/flaggable.js.coffee
new file mode 100644
index 000000000..7ada75686
--- /dev/null
+++ b/app/assets/javascripts/flaggable.js.coffee
@@ -0,0 +1,4 @@
+App.Flaggable =
+
+  update: (resource_id, button) ->
+    $("#" + resource_id + " .js-flag-actions").html(button).foundation()
diff --git a/app/views/proposals/_flag_actions.html.erb b/app/views/proposals/_flag_actions.html.erb
index 3e776de66..8aa3e5cf4 100644
--- a/app/views/proposals/_flag_actions.html.erb
+++ b/app/views/proposals/_flag_actions.html.erb
@@ -1,21 +1,19 @@
-<span class="js-flag-actions">
-  <span class="flag-content">
-    <% if show_flag_action? proposal %>
-      <a id="flag-expand-proposal-<%= proposal.id %>" data-toggle="flag-drop-proposal-<%= proposal.id %>" title="<%= t('shared.flag') %>">
-        <span class="icon-flag flag-disable"></span>
-      </a>
-      <span class="dropdown-pane" id="flag-drop-proposal-<%= proposal.id %>" data-dropdown data-auto-focus="true">
-        <%= link_to t('shared.flag'), flag_proposal_path(proposal), method: :put, remote: true, id: "flag-proposal-#{ proposal.id }" %>
-      </span>
-    <% end %>
+<span class="flag-content">
+  <% if show_flag_action? proposal %>
+    <a id="flag-expand-proposal-<%= proposal.id %>" data-toggle="flag-drop-proposal-<%= proposal.id %>" title="<%= t('shared.flag') %>">
+      <span class="icon-flag flag-disable"></span>
+    </a>
+    <span class="dropdown-pane" id="flag-drop-proposal-<%= proposal.id %>" data-dropdown data-auto-focus="true">
+      <%= link_to t('shared.flag'), flag_proposal_path(proposal), method: :put, remote: true, id: "flag-proposal-#{ proposal.id }" %>
+    </span>
+  <% end %>
 
-    <% if show_unflag_action? proposal %>
-      <a id="unflag-expand-proposal-<%= proposal.id %>" data-toggle="unflag-drop-proposal-<%= proposal.id %>" title="<%= t('shared.unflag') %>">
-        <span class="icon-flag flag-active"></span>
-      </a>
-      <span class="dropdown-pane" id="unflag-drop-proposal-<%= proposal.id %>" data-dropdown data-auto-focus="true">
-        <%= link_to t('shared.unflag'), unflag_proposal_path(proposal), method: :put, remote: true, id: "unflag-proposal-#{ proposal.id }" %>
-      </span>
-    <% end %>
-  </span>
+  <% if show_unflag_action? proposal %>
+    <a id="unflag-expand-proposal-<%= proposal.id %>" data-toggle="unflag-drop-proposal-<%= proposal.id %>" title="<%= t('shared.unflag') %>">
+      <span class="icon-flag flag-active"></span>
+    </a>
+    <span class="dropdown-pane" id="unflag-drop-proposal-<%= proposal.id %>" data-dropdown data-auto-focus="true">
+      <%= link_to t('shared.unflag'), unflag_proposal_path(proposal), method: :put, remote: true, id: "unflag-proposal-#{ proposal.id }" %>
+    </span>
+  <% end %>
 </span>
diff --git a/app/views/proposals/_refresh_flag_actions.js.erb b/app/views/proposals/_refresh_flag_actions.js.erb
index 0e20636ae..e89e316c2 100644
--- a/app/views/proposals/_refresh_flag_actions.js.erb
+++ b/app/views/proposals/_refresh_flag_actions.js.erb
@@ -1 +1,2 @@
-$("#<%= dom_id(@proposal) %> .js-flag-actions").html('<%= j render("proposals/flag_actions", proposal: @proposal) %>');
+App.Flaggable.update("<%= dom_id(@proposal) %>",
+  "<%= j render("proposals/flag_actions", proposal: @proposal) %>")
diff --git a/app/views/proposals/show.html.erb b/app/views/proposals/show.html.erb
index 867700d52..4b0cfe6f7 100644
--- a/app/views/proposals/show.html.erb
+++ b/app/views/proposals/show.html.erb
@@ -41,7 +41,9 @@
 
           <% if current_user %>
             <span class="bullet">&nbsp;&bull;&nbsp;</span>
-            <%= render 'proposals/flag_actions', proposal: @proposal %>
+            <span class="js-flag-actions">
+              <%= render 'proposals/flag_actions', proposal: @proposal %>
+            </span>
           <% end %>
 
         </div>
diff --git a/spec/features/proposals_spec.rb b/spec/features/proposals_spec.rb
index a7c7880a8..d297a294b 100644
--- a/spec/features/proposals_spec.rb
+++ b/spec/features/proposals_spec.rb
@@ -1244,6 +1244,34 @@ feature 'Proposals' do
     expect(Flag.flagged?(user, proposal)).to_not be
   end
 
+  scenario 'Flagging/Unflagging AJAX', :js do
+    user = create(:user)
+    proposal = create(:proposal)
+
+    login_as(user)
+    visit proposal_path(proposal)
+
+    # Flagging
+    within "#proposal_#{proposal.id}" do
+      page.find("#flag-expand-proposal-#{proposal.id}").click
+      page.find("#flag-proposal-#{proposal.id}").click
+
+      expect(page).to have_css("#unflag-expand-proposal-#{proposal.id}")
+    end
+
+    expect(Flag.flagged?(user, proposal)).to be
+
+    # Unflagging
+    within "#proposal_#{proposal.id}" do
+      page.find("#unflag-expand-proposal-#{proposal.id}").click
+      page.find("#unflag-proposal-#{proposal.id}").click
+
+      expect(page).to have_css("#flag-expand-proposal-#{proposal.id}")
+    end
+
+    expect(Flag.flagged?(user, proposal)).to_not be
+  end
+
   it_behaves_like "followable", "proposal", "proposal_path", { "id": "id" }
 
   it_behaves_like "documentable", "proposal", "proposal_path", { "id": "id" }