jQuery - Dynamically show and hide button on checkbox checked/ unchecked, and vise versa

I am trying to map a check-box checked & unchecked to a button show/hide. Also, to toggle check/uncheck the check-box when I click the mapped button. We are using Angular.js, so if there is an easier plugin you can recommend, that'd be great.

DEMO: jsFiddle

HTML

<input type="checkbox" value="1GB">1GB<br/>
<input type="checkbox" value="2GB">2GB<br/>
<input type="checkbox" value="4GB">4GB<br/>

<br /><br />

<table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla">

<button type="submit" value="1GB">1GB</button>
<button type="submit" value="2GB">2GB</button>
<button type="submit" value="3GB">4GB</button>

jQuery

$("button").hide();
$(":checkbox").change(function() {
    var checkedValues = $(":checkbox:checked").map(function() {
        return this.value;
    }).get();


$("button").hide();
   for (var i = 0; i < checkedValues.length; i++) {

    $("button:contains('" + checkedValues[i] + "')").show();
}
});

$("button").each(function() {
    $(this).click(function() {
  var checkedValues = $(":checkbox:checked").map(function() {
        return this.value;
    }).get();

  $(":checkbox").prop("checked", false); 


        for (var i = 0; i < checkedValues.length; i++) {
               $(":checkbox").prop("checked", false); 
        $("button:contains('" + checkedValues[i] + "')").hide();
   }


})

});