Issue with JSViews and Materialize Dropdown Button

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsviews/0.9.87/jsviews.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<div id="test_wrapper">

</div>

 <script id="test_template" type="text/x-jsrender">
 {^{for tasks}}
 	<div class="dropdown change-state" style="display: block">
		{^{if Status == 0}}
			<a href="#" class="completed-state-box dropdown-button btn btn-flat red" data-constrainwidth="false" data-activates='review_status_dropdown-{{:Id}}'>NOT COMPLETE</a>
		{{/if}}
		
  		{^{if Status == 1}}
  			<a href="#" class="completed-state-box dropdown-button btn btn-flat green" data-constrainwidth="false" data-activates='review_status_dropdown-{{:Id}}'>COMPLETE</a>
  		{{/if}}

		<ul id="review_status_dropdown-{{:Id}}" class="dropdown-content">
			<li><a class="state-change-button" href="#" data-value="0">NOT COMPLETE</a></li>
			<li><a class="state-change-button" href="#" data-value="1">COMPLETE</a></li>
		</ul>

	</div>
	
{{/for}}
 </script>

JavaScript

var test_data = {
 	selected_task: 1,
	tasks: [
		{
			Id: 0,
			title: "Task 1",
			Status: 0
		},
		{
			Id: 1,
			title: "Task 2",
			Status: 1
		}
	]
 };

$(document).ready(function () {
	$.templates("#test_template").link("#test_wrapper", test_data, true)
	.on("click", ".state-change-button", function () {
        var val_str = $(this).attr("data-value");
        var val = parseInt(val_str, 10);
        var idx = $(this).view().getIndex();
        $.observable(test_data.tasks[idx]).setProperty("Status", val);
		
		//tried this to see if this was issue, but the UL is actually being deleted from DOM
        //setTimeout(function () {
        //    $('.dropdown-button').dropdown({
        //        constrainWidth: false, // Does not change width of dropdown to that of the activator
        //        stopPropagation: false // Stops event propagation
        //    });
        //}, 100);
            
    });
	
	// need to formally initialize as we are using template.
	$('.dropdown-button').dropdown({
		constrainWidth: false, // Does not change width of dropdown to that of the activator
		stopPropagation: false // Stops event propagation
	});
});